/*
 * Rails upgrade LP. Loaded only on that page, after application.css, which supplies
 * the shared shell (header, footer, .wrap, .btn, .tag, .section-head, .stats, .cta).
 */

/* --rails-red / --rails-red-soft come from application.css, since the top page's
   Rails upgrade banner uses them too. */

/* ===== Red base =====
 * The top page runs its heavy panels in --green-deep. A landing page has to be seen,
 * so this one runs them in red instead. Same design language — the woven texture, the
 * clay-soft accents, the paper type — just a different base hue, which keeps the page
 * recognisably ours while giving it its own presence.
 *
 * These override the shared .stats / .company rules; rails_upgrade.css loads after
 * application.css, and the extra class keeps the intent explicit rather than relying
 * on file order alone.
 */
.lp-stats,
.company.lp-why{background-color:var(--rails-red-deep);}
.lp-hero .hero-visual-shape{background-color:var(--rails-red-deep);}

/* The header too. It was the last of the corporate site's green left on a red page, and
   as the first thing down the screen it kept announcing the wrong one. Everything on it
   inverts — a green logo on red muddies, and the nav's clay underline disappears into it. */
.lp-page header{
  background:rgba(142,32,24,0.94); border-bottom-color:rgba(251,248,241,0.16);
}
.lp-page .logo .kanji,
.lp-page nav a{color:var(--paper);}
/* clay-soft only makes 4.15:1 on the red, and this is 11px of tracked-out caps — the size
   that can least afford it. Warmed toward paper. */
.lp-page .logo .romaji{color:#F0CDB6;}
.lp-page nav a:hover{color:var(--paper);}
.lp-page nav a::after{background:var(--clay-soft);}
.lp-page .menu-btn{color:var(--paper);}
/* Paper on red — on this header the CTA has to be the brightest thing, not a green block
   sitting in it. */
.lp-page .nav-cta{
  background:var(--paper); color:var(--rails-red-deep) !important;
}
.lp-page .nav-cta:hover{background:var(--cream-deep); color:var(--rails-red-deep) !important;}
/* The mobile panel drops out of the header, so it can't be the paper the shared rule gives
   it — that would be a white sheet falling out of a red bar. */
@media (max-width:860px){
  .lp-page nav{background:var(--rails-red-deep); border-bottom-color:rgba(251,248,241,0.16);}
}

/* #CFDBD1 is a green-tinted grey — it was picked to sit on --green-deep, where it reads as
   quiet. On red it just reads muddy, and these are lines that should carry. Paper white. */
.lp-stats .stat-label,
.company.lp-why .section-head p,
.lp-why .why-item p{color:var(--paper);}
/* .cost-col-accent and .cost-tag-us are set to red at their own rules further down —
   they live in this file, so overriding them from up here would just lose on source order. */

/* The type scale these rules used to override now lives in application.css — both pages
   run it. Keeping copies here would only be a second set of numbers to forget.

   The lede below is built as one beat and shouldn't break over 20-odd pixels. Opt in per
   line rather than widening every section's measure, and let it wrap again on narrow
   screens where one line was never going to happen. */
@media (min-width:861px){
  .section-head p.no-wrap{max-width:none; white-space:nowrap;}
}

/* ===== Hero: upgrade path card ===== */
.lp-hero h1{line-height:1.45;}
/* The shared rule fills the bottom quarter of the line box with a solid block. That works
   behind 開発 on the top page — kanji sit flat on the baseline, so the block reads as a
   highlight under them. "Rails" is Latin: the block rides up over the letterforms and
   crushes them. Use an actual underline instead, offset clear of the glyphs. Green, not
   red — a tonal bar would melt into the word. em units so it tracks the clamped h1. */
.lp-hero h1 em{
  color:var(--rails-red);
  background:none;
  text-decoration:underline;
  text-decoration-color:var(--green-deep);
  text-decoration-thickness:0.07em;
  text-underline-offset:0.14em;
}
/* A badge, not a caption. The shared eyebrow is small, tracked-out type against paper — no
   amount of weight makes that register before it's read, and this line's whole job is to
   land "this is about Rails" the moment the page opens. Solid red arrives as a shape first.
   The rule that leads the shared eyebrow goes; a badge doesn't need pointing at. */
.lp-hero .hero-eyebrow{
  background:var(--rails-red); color:var(--paper);
  font-size:18px; font-weight:700; letter-spacing:.14em;
  /* body's 1.85 leading is for prose — on a badge it just inflates the box */
  line-height:1.3;
  padding:10px 22px; border-radius:8px; gap:0;
}
.lp-hero .hero-eyebrow::before{display:none;}
.path-card{
  position:relative; z-index:1;
  background:var(--paper); border:1px solid var(--line); border-radius:24px;
  padding:32px; box-shadow:0 30px 60px -30px rgba(47,74,61,0.35);
}
/* The 18px top margin was clearing the "現在地" tag that used to sit above the list.
   That tag now rides on the 5.2 row, so the list starts the card. */
.path-steps{list-style:none; margin:0; padding:0 0 0 26px; position:relative;}
.path-steps::before{
  content:''; position:absolute; left:5px; top:10px; bottom:10px; width:2px;
  background:repeating-linear-gradient(to bottom, var(--clay-soft) 0 5px, transparent 5px 10px);
}
.path-step{position:relative; padding:9px 0;}
.path-step::before{
  content:''; position:absolute; left:-26px; top:15px;
  width:12px; height:12px; border-radius:50%;
  background:var(--paper); border:2px solid var(--clay-soft);
}
.path-step.is-start::before{background:var(--clay); border-color:var(--clay);}
.path-step.is-goal::before{background:var(--rails-red); border-color:var(--rails-red); width:14px; height:14px; left:-27px;}
.path-ver{
  font-family:'Zen Old Mincho',serif; font-weight:600; color:var(--green-deep);
  font-size:18px; letter-spacing:.02em;
}
.path-step.is-start .path-ver, .path-step.is-goal .path-ver{font-size:22px;}
.path-note{
  display:inline-block; margin-left:10px; font-size:13px; font-weight:600;
  padding:3px 10px; border-radius:999px; letter-spacing:.04em;
}
.path-step.is-start .path-note{background:#F3E3DA; color:var(--clay);}
/* "現在地" rides on the 5.2 row rather than floating above the card, so it labels the row
   it's actually about. Neutral against the clay "サポート対象外" beside it, so the two
   badges read as separate facts. */
.path-step.is-start .path-here{background:var(--cream-deep); color:var(--green-mid);}
.path-step.is-goal .path-note{background:var(--rails-red); color:var(--paper);}
.path-step.is-goal .path-ver{color:var(--rails-red);}
.path-caption{
  margin-top:22px; padding-top:18px; border-top:1px solid var(--line);
  font-size:15px; color:var(--ink-soft); line-height:1.7;
}

/* ===== Problems ===== */
.lp-problems{background:var(--cream);}
.problem-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.problem-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:32px; border-left:3px solid var(--rails-red);
}
/* These are the lines meant to land — the reader should recognise their own situation in
   them. The cards are two-up and wide, so 18px was under-filling them. */
.problem-card h3{font-size:24px; margin-bottom:14px;}
.problem-card p{font-size:17.5px; color:var(--ink-soft);}

/* ===== Technical debt / barnacles ===== */
.drift-head{max-width:760px; margin:0 auto 56px; text-align:center;}
/* Matches .lp-page .section-head h2 — this section just doesn't use that wrapper. */
.drift-head h2{font-size:clamp(34px,5vw,52px); line-height:1.4; margin-bottom:26px;}
.drift-head blockquote{
  font-family:'Zen Old Mincho',serif; font-size:clamp(18px,2.3vw,23px);
  color:var(--green-deep); line-height:1.95; font-weight:500;
  padding:26px 30px; border-radius:var(--radius);
  background:var(--cream-deep); border:1px solid var(--line);
}
.drift-lead{margin-top:26px; color:var(--ink-soft); font-size:19px;}
.drift-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px;}
.drift-item{
  padding:32px 28px; border-radius:var(--radius);
  background:var(--paper); border:1px solid var(--line); text-align:center;
}
.drift-icon{
  width:52px; height:52px; margin:0 auto 20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--rails-red-soft); color:var(--rails-red);
}
.drift-icon svg{width:24px; height:24px;}
.drift-item h3{font-size:20px; margin-bottom:12px;}
.drift-item p{font-size:17px; color:var(--ink-soft);}
.drift-close{max-width:700px; margin:0 auto; text-align:center;}
.drift-close p{font-size:19px; color:var(--ink-soft); margin-bottom:22px;}
.drift-close strong{color:var(--green-deep); font-weight:600;}
/* The payoff of the section — nothing above it but space. An ornament here asks to be read
   too, and this line arrives harder on its own.
   Needs to out-specify `.drift-close p` above, which would otherwise pin it to body size. */
.drift-close .drift-punch{
  font-family:'Zen Old Mincho',serif; font-size:clamp(26px,3.8vw,38px);
  color:var(--green-deep); font-weight:600; letter-spacing:.04em; line-height:1.6;
  margin:64px 0 0;
}

/* ===== The real cost ===== */
.lp-cost{background:var(--cream);}
.cost-lead{max-width:720px; margin:0 auto 56px;}
.cost-lead blockquote{
  font-family:'Zen Old Mincho',serif; font-size:clamp(19px,2.5vw,25px);
  color:var(--green-deep); line-height:1.9; font-weight:500;
  padding-left:22px; border-left:3px solid var(--clay); margin-bottom:28px;
}
.cost-lead p{font-size:19px; color:var(--ink-soft); margin-bottom:16px;}
.cost-lead strong{color:var(--green-deep); font-weight:600;}
.cost-compare{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
.cost-col{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); padding:32px;
}
.cost-col-accent{
  background:var(--rails-red-deep); border-color:var(--rails-red-deep);
  background-image:
    repeating-linear-gradient(60deg, rgba(217,168,121,0.09) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-60deg, rgba(217,168,121,0.09) 0 1px, transparent 1px 30px);
}
.cost-tag{
  display:inline-block; font-size:14px; font-weight:700; letter-spacing:.06em;
  padding:6px 14px; border-radius:999px; margin-bottom:20px;
}
.cost-tag-self{background:var(--cream-deep); color:var(--ink-soft);}
/* clay on brick reads muddy — the tag has to sit out from the panel, not blend into it. */
.cost-tag-us{background:var(--paper); color:var(--rails-red-deep);}
.cost-col ul{list-style:none; padding:0; margin:0;}
.cost-col li{
  font-size:17.5px; color:var(--ink-soft); line-height:1.8;
  padding:12px 0 12px 34px; position:relative; border-top:1px solid var(--line);
}
.cost-col li:first-child{border-top:none;}
.cost-col li strong{color:var(--green-deep); font-weight:600;}
/* Both columns used the same dash, so which one was the good news only arrived after
   reading the sentence. A verdict per line, ahead of the words. */
.cost-col li::before{
  position:absolute; left:0; top:13px;
  width:22px; height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700; line-height:1;
}
.is-bad li::before{
  content:'\00d7';
  background:var(--rails-red); color:var(--paper);
}
/* A 20% white wash over red is still red — the tick had nothing to sit in. Solid paper, so
   the verdict is a mark on the panel rather than a shade of it. */
.is-good li::before{
  content:'\2713';
  background:var(--paper); color:var(--rails-red-deep);
}
.cost-col-accent li{color:var(--paper); border-top-color:rgba(247,242,231,0.22);}
.cost-col-accent li strong{color:var(--paper);}
.cost-note{
  max-width:720px; margin:28px auto 0; font-size:15px;
  color:var(--ink-soft); text-align:center; line-height:1.8;
}

/* ===== Service: 4 cards ===== */
.lp-service .service-grid{grid-template-columns:repeat(4,1fr); gap:22px;}
.lp-service .service-card{padding:32px 26px;}
.lp-service .service-card h3{font-size:20.5px;}

/* ===== Flow ===== */
.lp-flow{background:var(--cream);}
.flow-list{list-style:none; padding:0; margin:0 auto; max-width:800px;}
.flow-item{
  display:grid; grid-template-columns:76px 1fr; gap:26px; align-items:start;
  padding:30px 0; border-top:1px solid var(--line);
}
.flow-item:first-child{border-top:none;}
.flow-num{
  font-family:'Zen Old Mincho',serif; font-size:26px; font-weight:600;
  color:var(--clay); letter-spacing:.04em; line-height:1.4;
  display:flex; align-items:center; justify-content:center;
  width:62px; height:62px; border-radius:50%;
  background:var(--paper); border:1px solid var(--line);
}
.flow-body h3{font-size:21px; margin-bottom:10px;}
.flow-body p{font-size:17.5px; color:var(--ink-soft);}

/* ===== Scope ===== */
.scope-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.scope-item{
  padding:26px 24px; border-radius:var(--radius);
  background:var(--cream); border:1px solid var(--line);
}
.scope-item h4{
  font-family:'Zen Old Mincho',serif; font-size:19px;
  color:var(--green-deep); margin-bottom:10px; font-weight:600;
}
.scope-item p{font-size:16px; color:var(--ink-soft); line-height:1.75;}

/* ===== Why Chihaya (on the dark company panel) ===== */
.why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:26px; max-width:900px; margin:0 auto;}
.why-item{
  padding:30px; border-radius:var(--radius);
  border:1px solid rgba(247,242,231,0.18); background:rgba(251,248,241,0.04);
}
.why-item h3{font-size:20px; color:var(--paper); margin-bottom:12px;}
.why-item p{font-size:17px; color:var(--paper); line-height:1.85;}

/* ===== FAQ ===== */
.faq-list{max-width:800px; margin:0 auto;}
.faq-item{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius); margin-bottom:14px; overflow:hidden;
}
.faq-item summary{
  cursor:pointer; list-style:none; padding:22px 56px 22px 26px;
  font-family:'Zen Old Mincho',serif; font-size:19px; font-weight:600;
  color:var(--green-deep); position:relative; line-height:1.6;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:''; position:absolute; right:26px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:2px solid var(--clay); border-bottom:2px solid var(--clay);
  transform:rotate(45deg); transition:transform .25s ease;
}
.faq-item[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
.faq-item summary:hover{background:var(--cream);}
.faq-body{padding:0 26px 24px;}
.faq-body p{font-size:17.5px; color:var(--ink-soft); line-height:1.9;}

/* ===== Responsive ===== */
@media (max-width:980px){
  .lp-service .service-grid{grid-template-columns:repeat(2,1fr);}
  .drift-grid{grid-template-columns:1fr;}
  .scope-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:860px){
  .problem-grid{grid-template-columns:1fr;}
  .cost-compare{grid-template-columns:1fr;}
  .lp-service .service-grid{grid-template-columns:1fr;}
  .scope-grid{grid-template-columns:1fr;}
  .why-grid{grid-template-columns:1fr;}
  .flow-item{grid-template-columns:52px 1fr; gap:18px; padding:24px 0;}
  .flow-num{width:52px; height:52px; font-size:22px;}
  .drift-head blockquote{padding:22px 20px;}
  .faq-item summary{padding:18px 48px 18px 20px; font-size:18px;}
  .faq-body{padding:0 20px 20px;}
}