/* ==================================================================
   /plan page - Northlander.app landing
   Editorial vintage railway poster + travel magazine.
   Mirrors the stop-page editorial language: big Fraunces titles,
   pull quotes, chapter dividers, full-bleed forest-green bands,
   asymmetric grids, scrolling tickers.
   ================================================================== */

.plan-page-body{
  --pl-ivory:#f5f0e8;
  --pl-ivory-soft:#ede8da;
  --pl-cream:#ede0cc;
  --pl-paper:#f6ecd2;
  --pl-forest:#0a2d21;
  --pl-forest-2:#1f3d2d;
  --pl-rust:#7d3a1e;
  --pl-rust-d:#5e2a14;
  --pl-amber:#c4860f;
  --pl-gold:#c9a84c;
  --pl-ink:#241f1a;
  --pl-muted:#5a4f3d;
  background:var(--pl-ivory);
  color:var(--pl-ink);
  font-family:'Spline Sans',system-ui,sans-serif;
}

.plan-main{max-width:1180px;margin:0 auto;padding:0 24px 80px}

/* ==================================================================
   1. HERO
   Cinematic full-bleed photo, then the title block sits BELOW the
   image (like the stop pages) so the type can be massive and the
   image stays uncropped.
   ================================================================== */
.pl-hero{position:relative;margin:0 -24px}
.pl-hero-frame{
  position:relative;
  height:clamp(440px,72vh,720px);
  overflow:hidden;
  background:#1a120c;
}
.pl-hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  display:block;
}
.pl-hero-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,30,20,.55) 0%,
    rgba(10,30,20,0) 28%,
    rgba(10,30,20,0) 55%,
    rgba(10,30,20,.5) 100%);
}
/* Vintage stamp diagonal on the hero image */
.pl-hero-stamp{
  position:absolute;top:32px;right:32px;z-index:3;
  transform:rotate(-7deg);
  transform-origin:50% 10%;
  background:rgba(245,240,232,.92);
  color:var(--pl-rust);
  border:2px solid var(--pl-rust);
  padding:10px 18px;text-align:center;
  font-family:'Fraunces',Georgia,serif;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  animation:pl-hero-stamp-sway 6s ease-in-out infinite;
}
@keyframes pl-hero-stamp-sway{
  0%,100%{transform:rotate(-8deg)}
  50%    {transform:rotate(-4deg)}
}
.pl-hero-stamp span{
  display:block;font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--pl-rust-d);
}
.pl-hero-stamp strong{
  display:block;font-size:22px;font-weight:900;line-height:1;
  margin:4px 0;letter-spacing:.04em;color:var(--pl-rust);
}

.pl-hero-titlewrap{
  position:relative;
  max-width:1180px;
  margin:36px auto 0;
  padding:0 24px;
}
.pl-kicker{
  font-family:'Spline Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.26em;
  font-size:11px;font-weight:700;color:var(--pl-rust);
  margin-bottom:14px;
}
.pl-hero-title{
  font-family:'Fraunces',Georgia,serif;
  font-weight:900;color:var(--pl-forest);
  font-size:clamp(56px,9vw,118px);
  line-height:.9;letter-spacing:-.02em;margin:0;
  text-shadow:2px 2px 0 rgba(190,175,150,.55);
}
.pl-hero-title em{
  font-style:italic;font-weight:500;color:var(--pl-rust);
}
.pl-hero-tagline{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  color:var(--pl-rust);font-size:clamp(18px,2.4vw,26px);
  line-height:1.3;margin:18px 0 0;max-width:680px;
}
.pl-hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}

/* Ghost button reskin for the cream backdrop below hero */
.btn-ghost-dark{
  display:inline-flex;align-items:center;justify-content:center;
  padding:.85rem 1.5rem;border-radius:4px;font-weight:600;
  font-size:.95rem;text-decoration:none;
  background:transparent;color:var(--pl-forest);
  border:2px solid var(--pl-forest);
  transition:transform .15s, background .2s, color .2s;
  cursor:pointer;
}
.btn-ghost-dark:hover{
  background:var(--pl-forest);color:var(--pl-ivory);
}
.btn-ghost-dark:active{transform:scale(.97)}

/* ==================================================================
   TABLE OF CONTENTS - sticky horizontal nav (same pattern as
   stop-page sp-toc).
   ================================================================== */
.pl-toc{
  position:sticky;top:58px;z-index:40;
  background:rgba(247,239,222,.96);
  backdrop-filter:saturate(140%) blur(6px);
  -webkit-backdrop-filter:saturate(140%) blur(6px);
  border-top:1px solid #d9cfba;border-bottom:1px solid #d9cfba;
  margin:36px -24px 0;padding:8px 0;
}
.pl-toc-row{
  display:flex;gap:8px;overflow-x:auto;padding:0 24px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
  max-width:1180px;margin:0 auto;
}
.pl-toc-row::-webkit-scrollbar{display:none}
.pl-toc-link{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:999px;
  font-size:13px;font-weight:600;color:var(--pl-muted);
  text-decoration:none;white-space:nowrap;flex:none;line-height:1;
  background:transparent;
  transition:background .15s, color .15s, box-shadow .15s;
}
.pl-toc-link .ph-light{font-size:16px;color:var(--pl-rust)}
.pl-toc-link:hover{background:rgba(141,61,34,.08);color:var(--pl-ink)}
.pl-toc-link.is-active{
  background:var(--pl-rust);color:var(--pl-ivory);
  box-shadow:0 2px 8px rgba(141,61,34,.28);
}
.pl-toc-link.is-active .ph-light{color:var(--pl-ivory)}

/* ==================================================================
   SHARED SECTION HEADERS - match stop-page .sp-label / .sp-h2 voice
   ================================================================== */
.pl-section{margin:64px 0 0;position:relative}
.pl-section-kicker{
  font-family:'Spline Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;font-weight:700;color:var(--pl-rust);
  margin:0 0 12px;
}
.pl-section-kicker--light{color:var(--pl-amber)}
.pl-section-h2{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  color:var(--pl-forest);
  font-size:clamp(2rem,4.5vw,3.2rem);
  line-height:1.02;letter-spacing:-.01em;margin:0 0 18px;
}
.pl-section-h2--light{color:var(--pl-ivory)}
.pl-section-deck{
  font-family:'Fraunces',Georgia,serif;
  font-size:18px;line-height:1.6;color:var(--pl-ink);
  max-width:60ch;margin:0 0 32px;
}

.pl-sub-h3{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:22px;color:var(--pl-forest);
  margin:48px 0 18px;
}

/* ==================================================================
   2. EDITORIAL OPENING - two-column intro mirroring sp-intro
   ================================================================== */
.pl-intro-grid{
  display:grid;grid-template-columns:65% 35%;gap:48px;
  align-items:start;
}
.pl-intro-body p{
  font-family:'Fraunces',Georgia,serif;
  font-size:18px;line-height:1.8;color:var(--pl-ink);
  margin:0 0 20px;
}
.pl-intro-aside{
  padding-top:6px;
  border-left:2px solid var(--pl-rust);
  padding-left:24px;
}
.pl-pullquote{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:26px;line-height:1.3;color:var(--pl-rust);
  margin:0 0 28px;
}
.pl-stat-block{margin:0 0 22px}
.pl-stat-num{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  color:var(--pl-forest);font-size:46px;line-height:1;display:block;
}
.pl-stat-label{
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:600;
  color:var(--pl-muted);margin-top:6px;display:block;
}

.pl-pain-list{margin-top:36px;display:flex;flex-direction:column;gap:18px}
.pl-pain{
  display:flex;align-items:flex-start;gap:18px;
  padding:18px 0;border-top:1px solid #d9cfba;
}
.pl-pain:last-child{border-bottom:1px solid #d9cfba}
.pl-pain-num{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:32px;color:var(--pl-rust);line-height:1;flex:none;min-width:48px;
}
.pl-pain h3{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:20px;color:var(--pl-forest);margin:0 0 4px;
}
.pl-pain p{
  font-family:'Fraunces',Georgia,serif;
  font-size:16px;line-height:1.5;color:var(--pl-ink);opacity:.85;margin:0;
}

/* ==================================================================
   STOP PHOTO MARQUEE - full bleed scrolling band of real stop photos
   ================================================================== */
.pl-marquee{
  margin:56px -24px 0;
  background:var(--pl-cream);
  border-top:3px solid var(--pl-forest);
  border-bottom:3px solid var(--pl-forest);
  padding:18px 0;overflow:hidden;white-space:nowrap;
  position:relative;
  /* font-size:0 + line-height:0 + display:flex on the parent stops
     baseline alignment from adding a few pixels of descender space
     below the tiles, which was making the top and bottom gaps
     visually uneven. */
  font-size:0;line-height:0;
  display:flex;align-items:center;
}
.pl-marquee-track{
  display:inline-flex;align-items:center;gap:14px;
  animation:pl-marquee-scroll 90s linear infinite;
  font-size:initial;line-height:initial;
}
.pl-marquee:hover .pl-marquee-track{animation-play-state:paused}
.pl-marquee-item{
  display:block;position:relative;
  width:200px;height:140px;flex:none;
  overflow:hidden;border:2px solid var(--pl-forest);
  background:var(--pl-ivory);
  text-decoration:none;color:inherit;
  /* Linkified tiles - subtle lift + amber outline on hover. */
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.pl-marquee-item:hover{
  transform:translateY(-3px);
  border-color:var(--pl-amber);
  box-shadow:0 10px 20px rgba(10,45,33,.22);
}
.pl-marquee-item:focus-visible{
  outline:3px solid var(--pl-amber);outline-offset:2px;
}
.pl-marquee-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s ease;
}
.pl-marquee-item:hover img{transform:scale(1.06)}
.pl-marquee-name{
  position:absolute;left:0;right:0;bottom:0;
  background:rgba(10,45,33,.86);color:var(--pl-ivory);
  font-family:'Fraunces',Georgia,serif;
  font-size:13px;font-weight:600;letter-spacing:.04em;
  padding:5px 10px;text-align:left;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
}
.pl-marquee-name::after{
  content:"\2192";  /* right arrow as a 'go explore' affordance */
  color:var(--pl-gold);font-weight:700;font-size:14px;
  opacity:0;transform:translateX(-4px);
  transition:opacity .2s, transform .2s;
}
.pl-marquee-item:hover .pl-marquee-name::after{
  opacity:1;transform:translateX(0);
}
@keyframes pl-marquee-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ==================================================================
   3. PRODUCT SNAPSHOT - scrapbook polaroids
   Replaces the suitcase row. Three polaroid trip cards tilted on a
   warm cream paper band, each one showing a real Northern Ontario
   stop with a handwritten-style trip name underneath.
   ================================================================== */
.pl-scrapbook{
  position:relative;margin:40px -24px 0;
  background:
    /* warm kraft paper with thin diagonal grain */
    linear-gradient(180deg, #ede0cc 0%, #e3d2b3 100%);
  background-image:
    repeating-linear-gradient(45deg,
      rgba(45,30,20,.05) 0, rgba(45,30,20,.05) 1px,
      transparent 1px, transparent 9px);
  border-top:3px solid var(--pl-forest);
  border-bottom:3px solid var(--pl-forest);
  padding:64px 24px 72px;
  display:flex;justify-content:center;align-items:center;
  gap:clamp(20px,5vw,72px);flex-wrap:wrap;
}
.pl-polaroid{
  position:relative;width:clamp(220px,26vw,280px);
  background:#fbf6ea;
  padding:14px 14px 18px;
  box-shadow:0 12px 28px rgba(40,20,5,.28),
             0 2px 4px rgba(40,20,5,.15);
  font-family:'Fraunces',Georgia,serif;
  display:flex;flex-direction:column;gap:12px;
}
.pl-polaroid img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  background:#ddd1b8;
}
.pl-polaroid figcaption{
  text-align:center;padding:6px 4px 2px;
}
.pl-polaroid-meta{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Spline Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.2em;
  font-size:9px;font-weight:700;color:var(--pl-rust);
}
.pl-polaroid-dot{
  width:3px;height:3px;border-radius:50%;background:var(--pl-rust);
}
.pl-polaroid figcaption strong{
  display:block;font-family:'Fraunces',Georgia,serif;
  font-weight:700;font-style:italic;font-size:22px;
  color:var(--pl-forest);line-height:1.1;margin:6px 0 4px;
  letter-spacing:.01em;
}
.pl-polaroid-stops{
  display:block;font-size:11px;color:var(--pl-muted);
  letter-spacing:.04em;font-style:italic;line-height:1.4;
}
/* Tilt the cards like they're tacked on a scrapbook page */
.pl-polaroid-1{transform:rotate(-4deg)}
.pl-polaroid-2{transform:rotate(2deg) translateY(-8px)}
.pl-polaroid-3{transform:rotate(5deg)}

/* Masking tape strip across the corner */
.pl-tape{
  position:absolute;width:64px;height:18px;
  background:rgba(218,196,140,.7);
  border:1px solid rgba(150,120,70,.25);
  box-shadow:0 1px 2px rgba(40,20,5,.1);
}
.pl-tape-tl{top:-8px;left:-12px;transform:rotate(-32deg)}
.pl-tape-tr{top:-8px;right:-12px;transform:rotate(32deg)}

/* Feature mini-grid below the platform */
.pl-features{
  display:grid;grid-template-columns:repeat(3,1fr);gap:0;
  margin:48px 0 0;
}
.pl-feature{
  padding:24px 26px;
  border-top:1px solid #d9cfba;
  border-right:1px solid #d9cfba;
}
.pl-feature:nth-child(3n){border-right:0}
.pl-feature:nth-last-child(-n+3){border-bottom:1px solid #d9cfba}
.pl-feature i{
  font-size:32px;color:var(--pl-rust);display:block;margin-bottom:10px;
}
.pl-feature h3{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:20px;color:var(--pl-forest);margin:0 0 6px;
}
.pl-feature p{
  font-family:'Fraunces',Georgia,serif;
  font-size:15px;line-height:1.55;color:var(--pl-ink);opacity:.85;margin:0;
}

/* ==================================================================
   CHAPTER DIVIDER - mirrors sp-divider
   ================================================================== */
.pl-divider{
  position:relative;height:1px;background:var(--pl-forest);
  margin:64px 0;border:0;
}
.pl-divider::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:var(--pl-forest);
}
.pl-divider-badge{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:48px;height:48px;border-radius:50%;
  background:var(--pl-forest);color:var(--pl-ivory);
  display:flex;align-items:center;justify-content:center;font-size:22px;
}

/* ==================================================================
   4. PRICING - vintage tickets
   ================================================================== */
.pl-pricing{padding-bottom:0}
.pl-tickets{
  display:grid;gap:32px;grid-template-columns:1fr;
  margin-top:18px;
}
@media(min-width:820px){
  .pl-tickets{grid-template-columns:1fr 1.1fr;align-items:stretch}
}
.pl-ticket{
  position:relative;
  /* Same warm cream paper for both cards. Tones down the previous
     yellow gradient to a softer linen cream so the cards read as
     paper, not mustard. Differentiation lives in accents (stub
     band color, ribbon, border weight), not in background hue. */
  background:linear-gradient(180deg, #fbf6ea 0%, #f3ecd6 100%);
  border:2.5px solid var(--pl-rust);
  display:grid;grid-template-columns:48px 1fr;
  box-shadow:0 10px 28px rgba(80,50,20,.16);
  /* No overflow:hidden so the Best Value sticker can overhang the
     top-right corner cleanly. */
}
/* Left-side detachable stub band, like a real train ticket */
.pl-ticket-stub{
  position:relative;
  background:var(--pl-rust);
  color:var(--pl-ivory);
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:18px 6px;
  border-right:2px dashed rgba(245,240,232,.5);
  text-align:center;
}
.pl-ticket-stub-line{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'Fraunces',Georgia,serif;
  font-weight:900;font-size:16px;letter-spacing:.18em;
  text-transform:uppercase;line-height:1;
}
.pl-ticket-stub-no{
  font-family:'Spline Sans',sans-serif;
  font-size:9px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(245,240,232,.85);
  writing-mode:vertical-rl;transform:rotate(180deg);
}
.pl-ticket-stub-class{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:18px;color:var(--pl-gold);font-weight:700;letter-spacing:.12em;
}

.pl-ticket-main{
  padding:24px 26px 22px;display:flex;flex-direction:column;
}
.pl-ticket-meta{
  display:flex;justify-content:space-between;
  font-family:'Spline Sans',sans-serif;
  font-size:9px;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;color:var(--pl-muted);
  margin-bottom:6px;
}
.pl-ticket-header{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:18px;
}
.pl-ticket-class{
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:38px;color:var(--pl-forest);line-height:1;
  letter-spacing:-.01em;
}
.pl-ticket-price{
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:38px;color:var(--pl-rust);line-height:1;text-align:right;
}
.pl-ticket-price small{
  display:block;font-family:'Spline Sans',sans-serif;
  font-size:10px;font-weight:600;color:var(--pl-muted);
  letter-spacing:.2em;text-transform:uppercase;margin-top:6px;
}
.pl-ticket-pitch{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  color:var(--pl-rust);font-size:16px;margin:8px 0 16px;
}
.pl-ticket-rule{
  height:0;border:0;
  border-top:1px dashed rgba(125,60,30,.55);
  margin:8px 0 18px;position:relative;
}
.pl-ticket-rule::before,
.pl-ticket-rule::after{
  content:"";position:absolute;top:-7px;
  width:12px;height:12px;border-radius:50%;
  background:var(--pl-ivory);border:1px solid rgba(125,60,30,.4);
}
.pl-ticket-rule::before{left:-32px}
.pl-ticket-rule::after{right:-32px}
.pl-ticket-features{
  list-style:none;padding:0;margin:0 0 24px;
  display:flex;flex-direction:column;gap:18px;
  color:var(--pl-ink);
}
.pl-ticket-features li{
  display:flex;align-items:flex-start;gap:14px;line-height:1.4;
}
.pl-ticket-features li i{
  color:var(--pl-rust);font-size:24px;flex:none;line-height:1;margin-top:1px;
}
.pl-ticket-features li > div{
  flex:1;min-width:0;
}
.pl-ticket-features li strong{
  display:block;font-family:'Spline Sans',sans-serif;
  font-weight:700;font-size:17px;color:var(--pl-ink);line-height:1.3;
}
.pl-ticket-features li span{
  display:block;font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:14.5px;color:var(--pl-muted);line-height:1.5;margin-top:3px;
}
.pl-ticket-foot{margin-top:auto}
.pl-ticket-cta{
  margin-top:0;width:100%;
  background:var(--pl-rust);border-color:var(--pl-rust);
  color:var(--pl-ivory);
}
.pl-ticket-cta:hover{
  background:var(--pl-forest);border-color:var(--pl-forest);
  color:var(--pl-ivory);
}
.pl-ticket-trust{
  text-align:center;color:var(--pl-muted);font-size:13px;
  margin-top:10px;font-family:'Fraunces',Georgia,serif;font-style:italic;
}

/* First-class differentiation: same paper, forest-green stub,
   thicker border, gold stamp top-right, gold check icons. */
.pl-ticket--first{
  border-color:var(--pl-forest);
  border-width:3px;
  box-shadow:0 14px 36px rgba(20,50,30,.2);
}
.pl-ticket--first .pl-ticket-stub{
  background:var(--pl-forest);
}
.pl-ticket--first .pl-ticket-class{color:var(--pl-forest)}
.pl-ticket--first .pl-ticket-features li i{color:var(--pl-gold)}
/* Best Value corner sticker. Sits OUTSIDE the top-right corner of
   the First Class card so it never overlaps the price or the stub.
   Slight rotation + dashed inner rule = vintage stuck-on tag. Gentle
   continuous sway makes it feel pinned to the corner, not painted. */
.pl-ribbon{
  position:absolute;top:-18px;right:-14px;z-index:4;
  background:var(--pl-rust);color:var(--pl-ivory);
  padding:10px 18px;
  font-family:'Fraunces',Georgia,serif;
  font-weight:900;font-size:12px;letter-spacing:.24em;
  text-transform:uppercase;text-align:center;line-height:1;
  transform:rotate(6deg);
  transform-origin:50% 0%;
  box-shadow:0 8px 18px rgba(60,40,10,.35);
  border:1px solid rgba(31,61,45,.35);
  animation:pl-ribbon-sway 5s ease-in-out infinite;
}
.pl-ribbon::before{
  content:"";position:absolute;inset:3px;
  border:1px dashed rgba(245,240,232,.45);
  pointer-events:none;
}
.pl-ribbon span{position:relative;z-index:1}
@keyframes pl-ribbon-sway{
  0%,100%{transform:rotate(4deg)}
  50%    {transform:rotate(9deg)}
}
.pl-route-line{
  display:flex;align-items:center;gap:6px;margin:0 0 8px;
}
.pl-route-stop{
  width:9px;height:9px;border-radius:50%;background:var(--pl-forest);flex:none;
  box-shadow:0 0 0 2px var(--pl-gold);
}
.pl-route-link{
  flex:1;height:0;border-top:2px dashed var(--pl-rust);
}

/* WHY UPGRADE sub-band inside pricing */
.pl-whyupgrade{margin-top:56px}
.pl-scenario-row{
  display:grid;grid-template-columns:repeat(3,1fr);gap:32px;
  margin-top:4px;
}
.pl-scenario{padding-top:8px;border-top:2px solid var(--pl-rust)}
.pl-scenario i{
  font-size:30px;color:var(--pl-rust);display:block;margin:14px 0 10px;
}
.pl-scenario h4{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:18px;color:var(--pl-forest);margin:0 0 6px;
}
.pl-scenario p{
  font-family:'Fraunces',Georgia,serif;
  font-size:15px;line-height:1.5;color:var(--pl-ink);opacity:.85;margin:0;
}

/* ==================================================================
   TICKER BAND - mirrors sp-ticker, lines of inspiration
   ================================================================== */
.pl-ticker{
  background:var(--pl-forest);color:var(--pl-ivory);
  overflow:hidden;margin:64px -24px 0;padding:18px 0;
  white-space:nowrap;
}
.pl-ticker-track{
  display:inline-flex;align-items:center;gap:0;
  animation:pl-ticker-scroll 80s linear infinite;
}
.pl-ticker:hover .pl-ticker-track{animation-play-state:paused}
.pl-ticker-item{
  display:inline-flex;align-items:center;gap:14px;padding:0 28px;
}
.pl-ticker-cat{
  text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;font-weight:700;color:var(--pl-amber);
}
.pl-ticker-fact{
  font-family:'Fraunces',Georgia,serif;font-size:17px;
  color:var(--pl-ivory);font-style:italic;
}
.pl-ticker-dot{
  width:5px;height:5px;border-radius:50%;
  background:var(--pl-amber);flex:none;
}
@keyframes pl-ticker-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}

/* ==================================================================
   6. HOW IT WORKS - three big steps with connecting line
   ================================================================== */
.pl-howitworks{padding-top:0}
.pl-steps{
  list-style:none;padding:0;margin:32px 0 0;
  display:grid;grid-template-columns:1fr;gap:28px;
  position:relative;
}
@media(min-width:780px){
  .pl-steps{grid-template-columns:repeat(3,1fr);gap:0}
  /* Rail line connecting the three steps */
  .pl-steps::before{
    content:"";position:absolute;left:8%;right:8%;top:34px;
    border-top:2px dashed var(--pl-rust);z-index:1;
  }
}
.pl-step{
  position:relative;padding:0 22px;text-align:center;background:var(--pl-ivory);
  z-index:2;
}
.pl-step-num{
  width:68px;height:68px;border-radius:50%;
  background:var(--pl-forest);color:var(--pl-ivory);
  border:3px solid var(--pl-gold);
  font-family:'Fraunces',Georgia,serif;font-weight:900;font-size:30px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto;box-shadow:0 6px 18px rgba(10,45,33,.28);
  position:relative;z-index:3;
}
.pl-step-icon{
  font-size:36px;color:var(--pl-rust);
  display:block;margin:22px auto 12px;
}
.pl-step h3{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:24px;color:var(--pl-forest);margin:0 0 10px;
}
.pl-step p{
  font-family:'Fraunces',Georgia,serif;
  font-size:16px;line-height:1.55;color:var(--pl-ink);
  opacity:.88;margin:0;max-width:30ch;margin-left:auto;margin-right:auto;
}

/* ==================================================================
   6.5 CONNECTED TO THE GUIDE - four editorial cards explaining how
   the App pairs with the Guide. Each card sits on cream paper with
   a left rust rule, big icon and italic body. Read as catalogue
   entries, not SaaS feature tiles.
   ================================================================== */
.pl-bridge-grid{
  display:grid;gap:24px;grid-template-columns:1fr;
  margin-top:24px;
}
@media(min-width:760px){
  .pl-bridge-grid{grid-template-columns:repeat(2,1fr);gap:28px}
}
.pl-bridge-card{
  background:#fbf6ea;
  border-left:4px solid var(--pl-rust);
  padding:26px 28px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 4px 14px rgba(80,50,20,.06);
  transition:transform .25s ease, box-shadow .25s ease;
}
.pl-bridge-card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 24px rgba(80,50,20,.12);
}
.pl-bridge-icon{
  font-size:38px;color:var(--pl-rust);
  display:block;line-height:1;margin-bottom:6px;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.pl-bridge-card:hover .pl-bridge-icon{
  transform:scale(1.08) rotate(-4deg);
}
.pl-bridge-card h3{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:22px;color:var(--pl-forest);
  margin:0;line-height:1.15;
}
.pl-bridge-card p{
  font-family:'Fraunces',Georgia,serif;
  font-size:16px;line-height:1.6;color:var(--pl-ink);
  opacity:.86;margin:0;
}

/* ==================================================================
   7. USE CASES - full bleed forest band with photo tiles
   ================================================================== */
.pl-usecases{
  background:var(--pl-forest);color:var(--pl-ivory);
  margin:80px -24px 0;padding:60px 24px;
  position:relative;overflow:hidden;
}
.pl-usecases-inner{max-width:1180px;margin:0 auto}
/* 2x2 grid on mobile, 4-across on desktop. Was a 5-tile row that
   attempted a mobile marquee (both CSS-animation and JS-scroll
   variants) - abandoned when neither read as motion on the user's
   Brave iOS browser. Fifth tile (Northern Ontario Explorers) was
   redundant with the other four so dropping it left the strip
   clean at four. */
.pl-usecase-grid{
  display:grid;gap:16px;margin-top:28px;
  grid-template-columns:repeat(2,1fr);
}
@media(min-width:760px){
  .pl-usecase-grid{grid-template-columns:repeat(4,1fr)}
}
.pl-usecase{
  position:relative;
  aspect-ratio:3/4;
  background-color:#1a3527;
  background-size:cover;background-position:center center;
  background-repeat:no-repeat;
  border:2px solid var(--pl-amber);
  overflow:hidden;
  transition:transform .25s ease;
}
.pl-usecase:hover{transform:translateY(-4px)}
.pl-usecase::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(10,30,20,0) 30%, rgba(10,30,20,.85) 100%);
}
.pl-usecase-inner{
  position:absolute;left:0;right:0;bottom:0;
  padding:18px 16px;color:var(--pl-ivory);
  text-align:left;z-index:2;
}
.pl-usecase-inner i{
  font-size:24px;color:var(--pl-amber);display:block;margin-bottom:8px;
}
.pl-usecase h3{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:19px;color:var(--pl-ivory);line-height:1.15;
  margin:0;letter-spacing:.01em;
}

/* ==================================================================
   8. APP PREVIEW - journal spread
   ================================================================== */
.pl-journal{
  position:relative;
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  background:#fbf3df;
  border:1px solid #d9cfba;
  box-shadow:0 18px 40px rgba(40,30,15,.18);
  margin-top:32px;
  min-height:420px;
}
.pl-journal-spine{
  position:absolute;left:50%;top:0;bottom:0;
  width:1px;background:rgba(110,70,40,.4);
  box-shadow:0 0 24px 6px rgba(110,70,40,.15);
}
.pl-journal-page{
  position:relative;padding:36px;
  background-image:repeating-linear-gradient(0deg,
    transparent 0, transparent 31px,
    rgba(110,70,40,.08) 31px, rgba(110,70,40,.08) 32px);
  background-position:0 36px;
}
.pl-journal-page--left{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg, #f3ece0 0%, #e6dbc7 100%);
  padding:32px;
}
.pl-journal-cover{
  position:relative;
  display:flex;flex-direction:column;align-items:center;gap:18px;
  width:100%;
}
.pl-journal-stamp{
  align-self:flex-start;
  background:var(--pl-ivory);color:var(--pl-rust);
  border:2px solid var(--pl-rust);
  padding:8px 16px;text-align:center;
  transform:rotate(-6deg);
  box-shadow:0 4px 12px rgba(40,20,5,.2);
  margin-bottom:-6px;margin-left:-8px;
}
.pl-journal-stamp span{
  display:block;font-family:'Spline Sans',sans-serif;
  font-size:8px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:700;color:var(--pl-rust-d);
}
.pl-journal-stamp strong{
  display:block;font-family:'Fraunces',Georgia,serif;
  font-weight:900;font-size:18px;letter-spacing:.04em;line-height:1;
  margin:2px 0;color:var(--pl-rust);
}
.pl-journal-polaroid{
  position:relative;width:100%;max-width:340px;
  background:#fbf6ea;padding:14px 14px 18px;
  box-shadow:0 16px 32px rgba(40,20,5,.32),0 2px 4px rgba(40,20,5,.15);
  transform:rotate(2deg);
}
.pl-journal-polaroid img{
  width:100%;aspect-ratio:1/1;object-fit:cover;display:block;
  background:#ddd1b8;
}
.pl-journal-polaroid figcaption{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:15px;color:var(--pl-rust);text-align:center;
  padding-top:10px;
}
.pl-journal-tag{
  background:#e8d6a8;
  border:1px solid #8b6a3a;border-radius:4px;
  padding:10px 18px;text-align:center;
  box-shadow:0 4px 10px rgba(40,20,5,.2);
  transform:rotate(-2deg);
}
.pl-journal-tag span{
  display:block;text-transform:uppercase;letter-spacing:.22em;
  font-size:10px;font-weight:700;color:var(--pl-rust);
}
.pl-journal-tag strong{
  display:block;font-family:'Fraunces',Georgia,serif;
  font-weight:700;font-size:18px;color:var(--pl-forest);
  margin-top:2px;
}
.pl-journal-section{margin-bottom:24px}
.pl-journal-label{
  text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;font-weight:700;color:var(--pl-rust);margin-bottom:10px;
}
.pl-journal-stops{
  list-style:none;padding:0;margin:0;
}
.pl-journal-stops li{
  font-family:'Fraunces',Georgia,serif;font-size:18px;
  color:var(--pl-forest);font-weight:500;
  padding:6px 0;display:flex;align-items:center;gap:12px;
  border-bottom:1px dashed rgba(110,70,40,.35);
}
.pl-journal-stop-dot{
  width:10px;height:10px;border-radius:50%;
  background:var(--pl-rust);box-shadow:0 0 0 2px var(--pl-gold);
  flex:none;
}
.pl-journal-stats{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px 22px;
  padding:18px 0;border-top:1px solid rgba(110,70,40,.25);
  border-bottom:1px solid rgba(110,70,40,.25);margin-bottom:18px;
}
.pl-journal-stats > div{display:flex;flex-direction:column;gap:2px}
.pl-journal-stats b{
  font-family:'Fraunces',Georgia,serif;font-weight:700;
  font-size:22px;color:var(--pl-rust);
}
.pl-journal-stats span{
  font-size:11px;letter-spacing:.06em;color:var(--pl-muted);
  text-transform:uppercase;
}
.pl-journal-tiles{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.pl-journal-tile{
  background:var(--pl-forest);color:var(--pl-ivory);
  padding:14px 12px;text-align:left;
  font-family:'Spline Sans',sans-serif;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.pl-journal-tile i{font-size:18px;color:var(--pl-gold)}

/* ==================================================================
   9. TESTIMONIAL - full bleed forest band, oversized quote mark
   ================================================================== */
.pl-testimonial{
  background:var(--pl-forest);color:var(--pl-ivory);
  margin:80px -24px 0;padding:72px 24px;
  position:relative;overflow:hidden;
}
.pl-testimonial::before{
  content:"";position:absolute;inset:0;
  background-image:repeating-linear-gradient(45deg,
    rgba(245,240,232,.025) 0, rgba(245,240,232,.025) 1px,
    transparent 1px, transparent 8px);
  pointer-events:none;
}
.pl-testimonial-inner{
  max-width:820px;margin:0 auto;text-align:left;
  position:relative;
}
.pl-testimonial-mark{
  position:absolute;left:-12px;top:-46px;
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:180px;color:var(--pl-gold);
  line-height:1;opacity:.45;pointer-events:none;
}
.pl-testimonial blockquote{
  font-family:'Fraunces',Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(22px,3vw,32px);line-height:1.4;
  color:var(--pl-ivory);margin:0 0 22px;position:relative;z-index:2;
}
.pl-testimonial figcaption{
  font-family:'Spline Sans',sans-serif;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--pl-amber);
  position:relative;z-index:2;
}

/* ==================================================================
   10. TRUST - stamped badges
   ================================================================== */
.pl-trust-grid{
  display:grid;gap:0;grid-template-columns:1fr;margin-top:32px;
}
@media(min-width:680px){
  .pl-trust-grid{grid-template-columns:repeat(2,1fr)}
}
@media(min-width:980px){
  .pl-trust-grid{grid-template-columns:repeat(4,1fr)}
}
.pl-trust-card{
  padding:28px 24px;
  border-top:3px solid var(--pl-forest);
  border-right:1px solid #d9cfba;
}
.pl-trust-card:nth-last-child(-n+1){border-right:0}
@media(min-width:980px){
  .pl-trust-card:nth-child(4n){border-right:0}
}
@media(min-width:680px) and (max-width:979px){
  .pl-trust-card:nth-child(2n){border-right:0}
}
.pl-trust-badge{
  width:54px;height:54px;border-radius:50%;
  background:var(--pl-forest);color:var(--pl-amber);
  display:flex;align-items:center;justify-content:center;
  font-size:24px;margin-bottom:14px;
  box-shadow:0 4px 12px rgba(10,45,33,.2);
}
.pl-trust-card h3{
  font-family:'Fraunces',Georgia,serif;font-weight:600;
  font-size:19px;color:var(--pl-forest);margin:0 0 6px;
}
.pl-trust-card p{
  font-family:'Fraunces',Georgia,serif;
  font-size:15px;line-height:1.55;color:var(--pl-ink);
  opacity:.85;margin:0;
}

/* ==================================================================
   11. FAQ - stop-page style border-left accordion
   ================================================================== */
.pl-faq-list{margin-top:32px}
.pl-faq-item{
  border-left:4px solid var(--pl-rust);
  padding:0 0 0 22px;margin:0 0 14px;
  background:transparent;
  border-radius:0;
  border-top:0;border-right:0;border-bottom:0;
}
.pl-faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;width:100%;padding:18px 0;
  font-family:'Spline Sans',sans-serif;font-size:17px;font-weight:600;
  color:var(--pl-ink);
}
.pl-faq-item summary::-webkit-details-marker{display:none}
.pl-faq-item summary i{
  color:var(--pl-rust);font-size:22px;flex:none;
  transition:transform .25s ease;
}
.pl-faq-item[open] summary i{transform:rotate(45deg)}
.pl-faq-item p{
  font-family:'Fraunces',Georgia,serif;
  font-size:16px;line-height:1.7;color:var(--pl-muted);
  padding:0 24px 18px 0;margin:0;
}

/* ==================================================================
   12. FINAL CTA - vintage boarding pass laid on a forest band
   The forest band still anchors the page footer; the cream
   boarding pass sits on top with a railway header, a From-To
   journey row with a route line, the CTAs, a perforated stub
   footer, and a circular Now Boarding postmark stamped over
   the corner.
   ================================================================== */
.pl-finalcta{
  background:var(--pl-forest);color:var(--pl-ivory);
  margin:80px -24px 0;padding:72px 24px;
  position:relative;overflow:hidden;
}
/* Subtle warp-thread paper texture behind the boarding pass so
   the forest band itself isn't a flat plane. */
.pl-finalcta::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(245,240,232,.025) 0, rgba(245,240,232,.025) 1px,
      transparent 1px, transparent 9px);
}

.pl-pass{
  position:relative;z-index:1;
  max-width:980px;margin:0 auto;
  background:#fbf3df;
  color:var(--pl-ink);
  box-shadow:
    0 22px 50px rgba(0,0,0,.32),
    0 4px 10px rgba(0,0,0,.18);
  /* Scalloped perforations on the left and right edges = ticket */
  -webkit-mask-image:
    radial-gradient(circle 8px at 0% 50%, transparent 7px, black 8px),
    radial-gradient(circle 8px at 100% 50%, transparent 7px, black 8px);
  mask-image:
    radial-gradient(circle 8px at 0% 50%, transparent 7px, black 8px),
    radial-gradient(circle 8px at 100% 50%, transparent 7px, black 8px);
}

/* Header band: thin forest stripe with brand wordmark on the
   left and "Boarding Pass" label on the right. */
.pl-pass-head{
  background:var(--pl-forest);
  color:var(--pl-ivory);
  padding:14px 28px;
  display:flex;justify-content:space-between;align-items:center;
  gap:18px;flex-wrap:wrap;
  border-bottom:3px double var(--pl-gold);
}
.pl-pass-head-left{
  display:flex;flex-direction:column;gap:2px;line-height:1.15;
}
.pl-pass-brand{
  font-family:'Fraunces',Georgia,serif;
  font-weight:900;font-size:18px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--pl-ivory);
}
.pl-pass-route{
  font-family:'Spline Sans',sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  font-weight:600;color:var(--pl-gold);
}
.pl-pass-head-right{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:16px;color:var(--pl-gold);
  border:1px dashed var(--pl-gold);
  padding:5px 14px;
  text-transform:uppercase;letter-spacing:.16em;font-weight:700;
}

/* Body: paper with a faint line-ruled background. */
.pl-pass-body{
  position:relative;padding:40px 36px 32px;
  background-image:repeating-linear-gradient(0deg,
    transparent 0, transparent 31px,
    rgba(110,70,40,.06) 31px, rgba(110,70,40,.06) 32px);
  background-position:0 28px;
}

/* Circular Now Boarding postmark. Rotated, with a double border
   and three text lines arranged top/middle/bottom. Floats over
   the top-right corner of the body. */
.pl-pass-stamp{
  position:absolute;top:24px;right:32px;z-index:3;
  width:118px;height:118px;border-radius:50%;
  background:radial-gradient(circle, rgba(196,134,15,.05) 0%, transparent 65%),
             var(--pl-amber);
  color:var(--pl-forest);
  border:3px double var(--pl-forest);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;line-height:1;
  font-family:'Fraunces',Georgia,serif;
  transform:rotate(-12deg);
  transform-origin:50% 50%;
  box-shadow:0 8px 20px rgba(0,0,0,.32),
             inset 0 0 0 2px rgba(31,61,45,.1);
  animation:pl-pass-stamp-sway 5s ease-in-out infinite;
}
.pl-pass-stamp::before{
  content:"";position:absolute;inset:6px;border-radius:50%;
  border:1px dotted rgba(31,61,45,.4);pointer-events:none;
}
.pl-pass-stamp-top,
.pl-pass-stamp-bot{
  font-size:9px;font-weight:900;letter-spacing:.2em;
  text-transform:uppercase;color:var(--pl-forest);
}
.pl-pass-stamp-mid{
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:18px;letter-spacing:.04em;line-height:1;
  margin:4px 0;color:var(--pl-forest);
}
@keyframes pl-pass-stamp-sway{
  0%,100%{transform:rotate(-14deg)}
  50%    {transform:rotate(-8deg)}
}

/* From -> Train -> To journey row */
.pl-pass-journey{
  display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;gap:20px;
  padding-right:140px;
  margin-bottom:32px;
}
.pl-pass-leg{display:flex;flex-direction:column;gap:2px}
.pl-pass-leg--to{text-align:right}
.pl-pass-label{
  font-family:'Spline Sans',sans-serif;
  font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700;color:var(--pl-rust);
}
.pl-pass-place{
  font-family:'Fraunces',Georgia,serif;
  font-weight:900;font-size:clamp(22px,3vw,30px);
  color:var(--pl-forest);line-height:1.05;letter-spacing:-.01em;
}
.pl-pass-sub{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:14px;color:var(--pl-muted);margin-top:2px;
}
.pl-pass-line{
  display:flex;align-items:center;gap:6px;min-width:140px;
  position:relative;
}
.pl-pass-stop{
  width:11px;height:11px;border-radius:50%;
  background:var(--pl-forest);box-shadow:0 0 0 3px var(--pl-gold);
  flex:none;
}
.pl-pass-track{
  flex:1;height:0;border-top:2px dashed var(--pl-rust);
}
.pl-pass-train{
  font-size:26px;color:var(--pl-rust);
  background:#fbf3df;padding:0 6px;
}

/* CTA block sits centered under the journey */
.pl-pass-cta{text-align:left;max-width:640px}
.pl-pass-kicker{
  font-family:'Spline Sans',sans-serif;
  text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;font-weight:700;color:var(--pl-rust);
  margin:0 0 12px;
}
.pl-pass-cta h2{
  font-family:'Fraunces',Georgia,serif;font-weight:900;
  font-size:clamp(2rem,4.5vw,3rem);
  color:var(--pl-forest);margin:0 0 12px;line-height:1.05;
}
.pl-pass-cta p{
  font-family:'Fraunces',Georgia,serif;font-style:italic;
  font-size:18px;color:var(--pl-ink);opacity:.85;margin:0 0 22px;
  max-width:50ch;
}

/* Footer stub: forest band with three small data fields, like
   the date/seat/pass-number strip on a real ticket. */
.pl-pass-foot{
  background:var(--pl-forest);color:var(--pl-ivory);
  padding:14px 28px;
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;flex-wrap:wrap;
  border-top:3px double var(--pl-gold);
  font-family:'Spline Sans',sans-serif;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:600;color:var(--pl-gold);
}
.pl-pass-foot strong{
  color:var(--pl-ivory);font-weight:700;
  margin-right:6px;
}
.pl-pass-foot > span:nth-child(2){
  font-style:italic;text-transform:none;letter-spacing:.06em;
  font-family:'Fraunces',Georgia,serif;color:#e7decc;
  font-size:13px;font-weight:500;
}

/* Existing button + link styling carries over */
.pl-finalcta-row{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;
}
.pl-finalcta-row .btn-primary{
  background:var(--pl-rust);border-color:var(--pl-rust);
  color:var(--pl-ivory);
}
.pl-finalcta-row .btn-primary:hover{
  background:var(--pl-forest);border-color:var(--pl-forest);color:var(--pl-ivory);
}
.pl-finalcta-link{
  color:var(--pl-rust);text-decoration:none;
  font-weight:600;font-size:.95rem;letter-spacing:.04em;
  display:inline-flex;align-items:center;gap:.3rem;
  border-bottom:1px dashed transparent;padding:.4rem 0;
}
.pl-finalcta-link:hover{border-bottom-color:var(--pl-rust)}

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media(max-width:780px){
  .plan-main{padding:0 18px 60px}
  .pl-hero{margin:0 -18px}
  .pl-hero-titlewrap{padding:0 18px}
  .pl-toc{margin:28px -18px 0}
  .pl-toc-row{padding:0 18px}
  .pl-intro-grid{grid-template-columns:1fr;gap:32px}
  .pl-intro-aside{border-left:0;padding-left:0;border-top:2px solid var(--pl-rust);padding-top:18px}
  .pl-stat-num{font-size:36px}
  .pl-pullquote{font-size:22px}
  .pl-marquee{margin:40px -18px 0}
  .pl-marquee-item{width:160px;height:110px}
  .pl-scrapbook{margin:28px -18px 0;padding:48px 18px 56px;gap:18px}
  .pl-polaroid{width:min(280px,100%);}
  .pl-polaroid-2{transform:rotate(2deg)}
  .pl-features{grid-template-columns:1fr}
  .pl-feature{border-right:0}
  .pl-feature:nth-last-child(-n+1){border-bottom:1px solid #d9cfba}
  .pl-ticket{grid-template-columns:36px 1fr}
  .pl-ticket-class,.pl-ticket-price{font-size:30px}
  .pl-scenario-row{grid-template-columns:1fr;gap:24px}
  .pl-ticker{margin:48px -18px 0}
  .pl-usecases{margin:60px -18px 0;padding:48px 18px}
  .pl-journal{grid-template-columns:1fr;min-height:0}
  .pl-journal-spine{display:none}
  .pl-journal-page{padding:24px}
  .pl-testimonial{margin:60px -18px 0;padding:56px 24px}
  .pl-testimonial-mark{font-size:120px;top:-24px;left:0}
  .pl-finalcta{margin:60px -18px 0;padding:48px 18px}
  .pl-pass-head,
  .pl-pass-foot{padding:12px 18px;font-size:10px}
  .pl-pass-brand{font-size:15px}
  .pl-pass-body{padding:32px 22px 24px}
  .pl-pass-stamp{
    position:relative;top:auto;right:auto;
    width:100px;height:100px;margin:0 auto 18px;
  }
  .pl-pass-journey{
    grid-template-columns:1fr;gap:14px;
    padding-right:0;margin-bottom:24px;text-align:center;
  }
  .pl-pass-leg{align-items:center}
  .pl-pass-leg--to{text-align:center}
  .pl-pass-line{
    transform:rotate(90deg);width:80px;min-width:0;
    margin:6px auto;
  }
}

/* ==================================================================
   MOTION
   A few small, vintage-poster-appropriate animations: hanging
   stamps that sway like a sign in the wind, a chapter-divider
   train icon that bobs like a railway car, hover lifts on the
   polaroids, and gentle hover transforms on the icon badges.
   All gated behind prefers-reduced-motion so users who have asked
   the OS for less motion get the static design.
   ================================================================== */

/* Chapter-divider train: subtle continuous bob. The icon itself is
   inside .pl-divider-badge; we animate the badge so the shadow
   moves with it. */
.pl-divider-badge{
  animation:pl-divider-bob 4s ease-in-out infinite;
}
@keyframes pl-divider-bob{
  0%,100%{transform:translate(-50%,-50%)}
  50%    {transform:translate(-50%,calc(-50% - 4px))}
}

/* Polaroids: pick one up on hover - lift, drop shadow, straighten
   slightly so it reads as 'looking closer at this trip'. */
.pl-polaroid,
.pl-journal-polaroid{
  transition:transform .35s cubic-bezier(.2,.7,.3,1),
             box-shadow .35s ease;
}
.pl-polaroid-1:hover{
  transform:rotate(-1deg) translateY(-8px);
  box-shadow:0 20px 36px rgba(40,20,5,.35),0 2px 4px rgba(40,20,5,.15);
}
.pl-polaroid-2:hover{
  transform:rotate(0deg) translateY(-16px);
  box-shadow:0 20px 36px rgba(40,20,5,.35),0 2px 4px rgba(40,20,5,.15);
}
.pl-polaroid-3:hover{
  transform:rotate(2deg) translateY(-8px);
  box-shadow:0 20px 36px rgba(40,20,5,.35),0 2px 4px rgba(40,20,5,.15);
}
.pl-journal-polaroid:hover{
  transform:rotate(0deg) translateY(-4px);
}

/* Feature-card icons: a small bounce on hover. */
.pl-feature i{
  transition:transform .3s cubic-bezier(.2,.7,.3,1), color .2s;
}
.pl-feature:hover i{
  transform:translateY(-4px) scale(1.08) rotate(-4deg);
}

/* Use-case tile icons: scale + small lift on hover, layered with
   the existing card hover that lifts the tile itself. */
.pl-usecase-inner i{
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.pl-usecase:hover .pl-usecase-inner i{
  transform:scale(1.18) translateY(-2px);
}

/* Trust badge: subtle pendulum rotation on hover. */
.pl-trust-badge{
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.pl-trust-card:hover .pl-trust-badge{
  transform:rotate(-10deg) scale(1.06);
}

/* Step numbers: small lift on hover of the parent step. */
.pl-step-num{
  transition:transform .3s cubic-bezier(.2,.7,.3,1),
             box-shadow .3s ease;
}
.pl-step:hover .pl-step-num{
  transform:translateY(-4px);
  box-shadow:0 10px 22px rgba(10,45,33,.34);
}

/* Hero CTA buttons: a tiny lift on hover so they feel pressable. */
.pl-hero-cta .btn{
  transition:transform .2s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
}
.pl-hero-cta .btn:hover{
  transform:translateY(-2px);
}

/* Respect the user's OS-level motion preference. */
@media (prefers-reduced-motion: reduce){
  .pl-ribbon,
  .pl-hero-stamp,
  .pl-pass-stamp,
  .pl-divider-badge,
  .pl-marquee-track,
  .pl-ticker-track{
    animation:none !important;
  }
  .pl-polaroid,
  .pl-journal-polaroid,
  .pl-feature i,
  .pl-usecase-inner i,
  .pl-trust-badge,
  .pl-step-num,
  .pl-hero-cta .btn{
    transition:none !important;
  }
}

/* ==================================================================
   STOP PAGE "Plan Your Trip" CTA - lives in styles.css now but keep
   a hook here so the design tokens are visible in one place.
   ================================================================== */