/* ==================================================================
   /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}
.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(5,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.
   ================================================================== */