/* ============================================================
   Sakana Marlin landing page — responsive stylesheet  /marlin/
   ------------------------------------------------------------
   Single page (SP markup, <div class="sp">) served at every width.
   This file merges the former marlin.css (SP) and marlin-pc.css (PC)
   into two mutually-exclusive media queries so neither layer can leak
   into the other:
     • < 1024px  → the original SP (mobile) design, unchanged.
     • >= 1024px → the PC (desktop) design, scaled from the 1920px comp.
   ============================================================ */

/* ===== shared: scroll-lock scrollbar compensation =====
   The menu scroll-lock (html/body.menu-open{overflow:hidden}) removes the page
   scrollbar; with classic (always-visible) scrollbars the viewport then widens
   ~15px, jumping the fixed header/nav and stranding the JS-positioned
   .nav-indicator. scrollbar-gutter:stable can't fix this — the reserved gutter
   is unpaintable, so it shows as a bare white bar beside the open drawer.
   Instead JS stores the vanishing scrollbar's width in --sbw while the menu is
   open (see the burger handler in assets/index.js) and the lock pads the page
   and the fixed bars by that much, so nothing shifts and the menu surfaces run
   flush to the window edge. 0px whenever scrollbars are overlay. */
body.menu-open{padding-right:var(--sbw,0px);}

/* ===== shared: PC-only helper elements, hidden by default (re-shown in the >=1024 block) ===== */
.sd-pc{display:none;}
.menu-close{display:none;}   /* PC-only X on the open burger panel; SP closes via the header burger */
.pc-drawer{display:none;}    /* PC-only burger drawer (shown via the >=1024 block); SP uses .menu-overlay */

/* ===== shared: black/white invert button variants — reusable on any .btn =====
   .btn--black starts solid black and flips to a white fill (black text/border) on hover;
   .btn--white is the exact mirror, so the two can sit side by side and swap in opposite directions.
   Selectors are doubled up (.btn.btn--black) to outrank the base .btn{border:1px solid transparent}
   shorthand, which would otherwise win the border-color on specificity order alone. */
.btn.btn--black{background:#000;color:#fff;border-color:#000;}
.btn.btn--black:hover{background:#fff;color:#000;border-color:#000;opacity:1;}
.btn.btn--white{background:#fff;color:#000;border-color:#000;}
.btn.btn--white:hover{background:#000;color:#fff;border-color:#000;opacity:1;}

/* ===== shared: generic per-character scroll-reveal (.reveal-chars) =====
   Reusable on any text element. JS (see marlin/index.html bottom script) splits the
   element's text into chars via GSAP SplitText, wraps each char in a ".char-mask" span,
   tags each mask with an --i index custom property, and — once a GSAP ScrollTrigger
   says the element is in view — adds .is-in to the element. Everything else (the actual
   per-character cascade/flip) is pure CSS below; no per-element JS tuning needed beyond
   an optional data-reveal-delay (ms) attribute to offset one element after another. */
.reveal-chars{opacity:0;}   /* hidden as plain text until JS finishes splitting it into chars (no flash); JS sets opacity:1 right after */
.reveal-chars .word{white-space:nowrap;}   /* SplitText also splits into per-word wrappers around the char-masks; nowrap keeps a long word's own letters from breaking mid-word once each is its own atomic inline-flex box — real spaces between .word stay valid line-wrap points */
.reveal-chars .char-mask{
  display:inline-flex;
  vertical-align:top;   /* explicit baseline avoids a Chromium inline-flex first-child mis-alignment */
  opacity:0;
  /* overflow:hidden; */
  position:relative;
  transform:translate3d(0, 20px, 0);
  transition:
    transform .1s cubic-bezier(.47, .16, .24, 1) calc(var(--i, 0) * .01s),
    opacity .1s linear calc(var(--i, 0) * .03s + .4s);   /* quick on/off, delayed until the flip is mostly done rotating into place — the transform is the showcased motion, not the fade */
}
.reveal-chars.is-in .char-mask{
  opacity:1;
  transform:translateZ(0);
}
.reveal-chars .char-mask .char{
  display:inline-flex;
  transform:perspective(1000px) translate3d(0, 70%, 0) rotateX(-90deg);
  transition:transform 1s cubic-bezier(.47, .16, .24, 1) calc(var(--i, 0) * .03s);
}
.reveal-chars.is-in .char-mask .char{
  transform:perspective(1000px) translateZ(0);
}

/* ===== shared: generic p5 boids-background mount point (see assets/sketch.js) =====
   Drop <div class="flock-bg" data-flock-bg> as a child of any position:relative
   section to give it a full-bleed animated canvas backdrop; JS sizes/positions
   the actual <canvas> via p5, this just claims the layer. */
.flock-bg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;}
.flock-bg canvas{display:block;}
/* hero-specific: the section has no background colour of its own, so the boids
   get clipped by a hard edge at the bottom — fade them into white instead. */
/* .hero .flock-bg::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:30%;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
} */

/* ===== shared: endless horizontal marquee keyframes for .cta-ghost =====
   Two spans, offset by half a cycle (one starts via a negative animation-delay),
   so as one slides fully off-screen the other is always mid-stream — a continuous loop. */
@keyframes ctaGhostMove1{0%{transform:translateX(100%);}100%{transform:translateX(-100%);}}
@keyframes ctaGhostMove2{0%{transform:translateX(0);}100%{transform:translateX(-200%);}}

/* ===== SP (mobile) — < 1024px ===== */
@media (max-width: 1023.98px){
  /* ============================================================
     Sakana Marlin landing page — SP (mobile) redesign  /marlin/
     Built from Figma "Sakana Marlin_v1" TOP/Full (node 226:1031).
     Mobile-first, fluid within a phone-width column.
     ============================================================ */

  :root{
    --blue:#6EA4F3;
    --blue-light:#7BADF4;
    --ink:#26272C;     /* primary headings */
    --ink2:#1E1E1E;
    --ink3:#262626;    /* gray800 — headings/hero copy (Figma) */
    --gray:#6C717E;    /* body copy (legacy) */
    --gray600:#6B7280; /* Figma gray/600 — lead/body copy */
    --muted:#9CA2AC;
    --red:#E10600;
    --border:#E5E7EB;  /* Figma gray/200 — card borders */
    --blue100:#E2EEFF; /* Figma blue/100 — product band bg */

    --bg-blue:#F8FBFF;
    --bg-gray:#FAFAFA;
    --bg-band:#E8F1FF;
    --chip:#F0F5FD;
    --check-bg:#EDF4FF;
    --placeholder:#EDEDED;

    --line:#E5E5E5;
    --line2:#EFEFEF;
    --line3:#DEDEDE;

    --pad:24px;            /* page side padding */
    --maxw:430px;          /* phone-width column */

    --font-en:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
    --font-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
    --font-pt:"PT Sans",sans-serif;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overflow-x:clip;}
  html{scroll-behavior:smooth;}
  body{
    /* White canvas. .sp is full-width white, so the body background is never seen
       in normal flow — but with viewport-fit=cover it propagates to the viewport
       canvas, which iOS paints into the safe-area insets (notch / Dynamic Island).
       A non-white value there shows as a grey band above the sticky header, so the
       canvas must stay white to read as part of the translucent white header. */
    background:#fff;
    color:var(--gray);
    font-family:var(--font-jp);
    font-size:14px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}

  /* phone-width column ---------------------------------------- */
  .sp{
    /* fluid fill below the PC breakpoint: the page spans the viewport and the
       readable content is centred at --sp-content via --gutter. At phone widths
       --gutter collapses to 24px (the original page padding), so the <=430px
       design is unchanged; the centring only engages once the viewport exceeds
       --sp-content + 48px (~728px). */
    --sp-content:680px;
    --gutter:max(24px, calc((100% - var(--sp-content)) / 2));
    /* hero video: fluid width = 359px at a 393px viewport (current size), growing
       with the viewport and capped at the content column. The hero mock-wrap
       height, CTA offset and hero height all derive from --mock-w (keeping the
       359:207 display box) so the video scales without overlapping the CTA. */
    --mock-w:min(var(--sp-content), calc(100vw * 359 / 393));
    position:relative;
    max-width:none;             /* was var(--maxw): no longer a 430px centred column */
    margin:0 auto;
    background:#fff;
    overflow-x:clip;            /* clip decorative bleed without breaking sticky header */
    min-height:100vh;
  }
  .pad{padding-left:var(--pad);padding-right:var(--pad);}

  /* anchor offset for sticky header */
  section[id]{scroll-margin-top:70px;}

  /* ---------- shared bits ---------- */
  .eyebrow{
    font-family:var(--font-jp);font-weight:600;font-size:16px;line-height:28px;
    color:var(--blue);
  }
  .sec-title{display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;}
  .sec-title h2{
    margin:0;font-family:var(--font-jp);font-weight:600;font-size:20px;line-height:30px;
    color:var(--ink3);
  }
  .lead{margin:0;text-align:center;color:var(--gray);font-size:14px;line-height:24px;font-weight:400;}
  .lead .hl{color:var(--blue);}
  .lead.soft{font-weight:300;}

  /* ---------- buttons ---------- */
  .btn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;height:48px;padding:0 20px;border-radius:8px;
    font-family:var(--font-jp);font-weight:600;font-size:14px;line-height:24px;
    cursor:pointer;border:1px solid transparent;transition:opacity .15s,background .15s,color .15s,border-color .15s;
  }
  .btn:hover{opacity:.9;}
  .btn--primary{background:var(--blue);color:#fff;}
  .btn--outline{background:#fff;color:var(--blue);border-color:var(--blue);}
  .btn .ext-ico{width:16px;height:16px;flex:none;}

  /* ============================================================
     Header (nav) — Figma Frame 14
     ============================================================ */
  .site-header{
    position:sticky;top:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    min-height:62px;padding:calc(10px + env(safe-area-inset-top)) 20px 10px 8px;
    background:rgba(255,255,255,.8);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--bg-gray);
  }
  .site-header .logo{height:38px;width:auto;transition:opacity .2s;}
  /* menu open: pin the header (fixed) so the same header logo and the close (X)
     stay visible even when the page was scrolled before opening the sheet.
     (body.menu-open sets overflow:hidden, which otherwise breaks the sticky header.) */
  body.menu-open .site-header{
    position:fixed;top:0;left:0;right:0;width:100%;
    padding-right:calc(20px + var(--sbw,0px));   /* scroll-lock: keep the burger where the scrollbar-era layout had it */
  }

  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:6px;
    width:42px;height:42px;padding:0 6px;background:none;border:0;cursor:pointer;
  }
  .burger span{display:block;height:2px;width:30px;background:#000;border-radius:2px;transition:.25s;}
  .burger.open span:nth-child(1){transform:translateY(8px) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg);}

  /* full-screen overlay menu (Figma: Gronav/Full) — sits BEHIND the sticky header
     so the header (status bar + blurred bar + X) stays visible on top of the sheet */
  .menu-overlay{
    position:fixed;inset:0;
    width:100%;background:#fff;z-index:90;
    display:flex;flex-direction:column;overflow-y:auto;
    opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease;
  }
  .menu-overlay.open{opacity:1;visibility:visible;}
  /* fluid like the page body: 40px inset at phone widths, then the inner column
     centres at --sp-content (680px) once the viewport grows — so the menu items
     line up with the page content instead of sitting in a fixed 430px box. */
  .menu-scroll{padding:calc(70px + env(safe-area-inset-top)) max(40px, calc((100% - var(--sp-content)) / 2)) calc(40px + env(safe-area-inset-bottom));}   /* clears the header (62 + notch) pinned above, and the home indicator below */
  .menu-group{padding:20px 0;display:flex;flex-direction:column;}
  /* FB: divider must bleed the full overlay width, but .menu-scroll's side padding is
     fluid (max(40px, ...)), so a fixed negative-margin bleed (like the PC drawer's) won't
     track it — use the 100vw-centered trick instead, which is padding-agnostic. */
  .menu-scroll>.menu-group:first-child{position:relative;padding-bottom:32px;}
  .menu-scroll>.menu-group:first-child::after{
    content:"";position:absolute;left:50%;bottom:0;width:100vw;
    transform:translateX(-50%);border-bottom:1px solid var(--border);
  }
  .menu-label{margin:0 0 8px;font-family:var(--font-en);font-weight:500;font-size:12px;line-height:18px;color:var(--gray);}
  .nav-indicator{display:none;}   /* PC-only scroll-spy underline; SP sheet has no in-bar indicator */
  .menu-link{
    display:flex;align-items:center;justify-content:flex-start;gap:10px;
    height:50px;padding:0 0 0 12px;
    font-family:var(--font-jp);font-weight:600;font-size:16px;line-height:26px;color:var(--ink3);
  }
  .menu-login{margin-top:20px;}
  .menu-social{display:flex;gap:8px;}
  .menu-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;}
  .menu-social svg{width:24px;height:24px;}
  .menu-lang{
    padding:20px 0;display:flex;justify-content:flex-end;align-items:center;gap:8px;
    font-family:var(--font-jp);font-weight:600;font-size:14px;color:var(--ink3);
  }
  .menu-lang .lang-current{display:none;}   /* SP shows the inline JA / EN toggle, not a pill trigger */
  .menu-lang .lang-options{display:flex;align-items:center;gap:8px;}
  .menu-lang a{cursor:pointer;}
  .menu-lang .active{font-size:14px;text-decoration:underline;text-underline-offset:4px;}
  .menu-lang .sep{font-size:16px;}
  html.menu-open,body.menu-open{overflow:hidden;}

  /* ============================================================
     Hero / KV
     ============================================================ */
  .hero{position:relative;height:calc(493px + var(--mock-w) * 207 / 359);background:#fff;}  /* =700px at 393px; grows with the fluid video */
  .hero::before{                       /* faint fish school (Figma KV): big square, bleeds off the top-right */
    content:"";position:absolute;top:-108px;right:-286px;width:713px;height:713px;z-index:0;
    background:url(/assets/marlin/hero-fish.png) center/contain no-repeat;
    opacity:.7;mix-blend-mode:multiply;pointer-events:none;
  }
  .hero-copy,.hero-lead,.hero-mock-wrap,.hero-cta{position:relative;z-index:1;}
  .hero .scroll-hint{z-index:10;}   /* rides above the next section so its lower half isn't clipped */
  .hero-copy{position:absolute;left:var(--gutter);right:var(--gutter);top:28px;}
  .hero-copy h1{
    margin:0;font-family:var(--font-en);font-weight:500;font-size:36px;line-height:54px;
    color:var(--ink3);letter-spacing:0;white-space:nowrap;
    display:flex;flex-direction:column;align-items:flex-start;
  }
  .hero-copy h1 span:not(:last-child){margin-bottom:-14px;}
  .hero-lead{
    position:absolute;left:var(--gutter);right:var(--gutter);top:164px;margin:0;
    color:var(--gray600);font-size:18px;line-height:28px;font-weight:500;font-family:var(--font-jp);
  }
  .hero-mock-wrap{position:absolute;left:0;right:0;top:247px;height:calc(var(--mock-w) * 207 / 359);display:flex;justify-content:center;}  /* =207px at 393px; tracks --mock-w */
  .hero-mock-frame{                                          /* Figma "mock" frame: faint panel + bezel around the video */
    position:relative;
    width:var(--mock-w);height:100%;box-sizing:border-box;
    padding:calc(var(--mock-w) * 14 / 990);                 /* Figma bezel (img inset ~1.41%) */
    border-radius:calc(var(--mock-w) * 22 / 990);           /* Figma 22px frame corner, scaled */
    background:linear-gradient(to bottom,#fdfdfd,#f9fafb);  /* faint near-white panel (Figma bg layer) */
    box-shadow:0 8.3px 8.3px rgba(0,0,0,.07);
  }
  .hero-mock-frame::before{                                  /* faint blue hairline: white at top-left -> #6EA4F3 (Figma blue-line) */
    content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
    background:linear-gradient(135deg,rgba(255,255,255,.8) 0%,rgba(110,164,243,.25) 55%,rgba(110,164,243,.32) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;     /* keep only the border ring, following the radius */
    pointer-events:none;
  }
  .hero-mock{
    display:block;width:100%;height:100%;max-width:none;
    border-radius:calc(var(--mock-w) * 9 / 990);            /* inner corner (concentric with the frame) */
    object-fit:cover;
  }
  .hero-cta{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(286px + var(--mock-w) * 207 / 359);display:flex;flex-direction:column;gap:12px;}  /* =493px at 393px; follows the video bottom */

  .scroll-hint{
    position:absolute;left:50%;transform:translateX(-50%);bottom:-30px;
    display:flex;flex-direction:column;align-items:center;gap:12px;
    height:100px;justify-content:flex-end;pointer-events:none;
  }
  .scroll-hint span{
    font-family:var(--font-en);font-weight:500;font-size:12px;line-height:1;color:var(--gray600);
    opacity:.5;
  }
  /* Bar length and fish travel share one width-aware knob (--swim): the bar
     always spans exactly the fish's full swim, so the fish rides along the bar
     instead of overshooting its lower end — and both scale together with width. */
  .scroll-track{
    --fish-size:24px;
    --swim:clamp(52px, 13vw, 72px);             /* fish travel; grows gently with width */
    position:relative;width:var(--fish-size);flex:none;
    height:calc(var(--swim) + var(--fish-size)); /* bar = travel + the fish itself */
  }
  .scroll-line{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:rgba(108,113,126,.2);border-radius:1px;}
  .scroll-fish{                          /* fish on a white disc; the disc rides the line and occludes it */
    position:absolute;left:50%;top:0;width:var(--fish-size);height:var(--fish-size);
    transform:translateX(-50%);
    animation:scrollFish 2.4s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes scrollFish{
    0%  {transform:translate(-50%,0);opacity:0;}
    12% {opacity:1;}
    82% {opacity:1;}
    100%{transform:translate(-50%,var(--swim));opacity:0;}  /* ends at the bar's bottom */
  }

  /* ============================================================
     About
     ============================================================ */
  .about{background:#fff;position:relative;}  /* sits below the scroll hint so it doesn't clip it */
  .about-concept{padding:100px 24px 60px;display:flex;flex-direction:column;align-items:center;gap:24px;}
  .about-concept .sec-title{width:345px;}
  .about-lead{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:100%;}
  .about-lead .lead{
    font-family:var(--font-jp);font-weight:400;font-size:14px;line-height:24px;
    color:var(--gray600);text-align:left;margin:0;
  }
  .about-lead .lead .hl{color:var(--blue);}
  /* Lead is left-aligned */
  br.pc-br{display:none;}   /* PC-only <br>: dropped on SP so EN lead reflows naturally (mirror of sp-br) */

  .product-band{                              /* product band, capped at the content column */
    /* height tracks width via the image's 4:3 box (393x294.75 = 4:3) instead of
       a fixed 294.75px, so the image is no longer clipped top/bottom as the band
       widens. Capped at --sp-content (680px) and centred so it doesn't grow
       oversized. At a 393px width this resolves to 393x294.75 — unchanged. */
    width:100%;max-width:var(--sp-content);margin-inline:auto;
    aspect-ratio:4 / 3;overflow:hidden;
  }
  .product-band img{width:100%;height:100%;object-fit:cover;}

  .point-list{padding:28px 24px 60px;display:flex;flex-direction:column;gap:24px;}
  .point-card{
    background:#fff;border:1px solid var(--border);border-radius:8px;padding:24px;
    display:flex;flex-direction:column;gap:12px;
  }
  .point-card .ptag{
    display:flex;gap:4px;
    font-family:var(--font-en);font-weight:500;font-size:14px;line-height:26px;color:var(--blue);
  }
  .point-card .ptxt{display:flex;flex-direction:column;gap:6px;}
  .point-card h3{margin:0;font-family:var(--font-jp);font-weight:600;font-size:18px;line-height:28px;color:var(--ink3);}
  .point-card p{margin:0;font-family:var(--font-jp);font-weight:400;font-size:12px;line-height:22px;color:var(--gray600);}

  /* ============================================================
     How to use
     ============================================================ */
  .howto{padding-bottom:0;border-top:1px solid var(--border);}  /* FB: full-width bar at the section top, above the 使い方 eyebrow (same pattern as PC) */
  .howto-head{padding:80px 24px 40px;display:flex;flex-direction:column;align-items:center;gap:24px;}
  .howto-steps{position:relative;}
  .howto-step{
    position:relative;overflow:visible;text-align:center;
    padding:102px 24px 32px;                                    /* Figma: 102px top — more breathing room above each label */
    background:linear-gradient(180deg,#F9FAFB 0%,#FFFFFF 38%);   /* Figma: gray-50 fades to white */
  }
  .howto-step .num{                      /* big index numeral: cut at the left edge, tucked behind the chevron above */
    position:absolute;left:-18px;top:5px;z-index:0;            /* numeral nudged up so its top just catches the chevron above */
    font-family:var(--font-en);font-weight:300;font-size:100px;line-height:.8;
    color:var(--blue);pointer-events:none;
  }
  .howto-step .fn,.howto-step .img-ph,.howto-step .step-img,.howto-step .desc{position:relative;z-index:1;}
  .howto-step .fn{
    font-family:var(--font-en);font-weight:500;font-size:14px;line-height:24px;
    color:var(--blue);margin:0 0 8px;
  }
  .howto-step .desc{margin:8px 0 0;font-size:14px;line-height:24px;color:var(--ink3);}
  .img-ph{
    display:flex;align-items:center;justify-content:center;background:var(--placeholder);
    font-family:var(--font-en);font-weight:700;font-size:24px;color:#000;border-radius:2px;
  }
  .howto-step .img-ph{height:194px;color:#D6D6D6;}
  .howto-step .step-img{display:block;width:100%;height:194px;object-fit:contain;margin:0 auto;}
  /* chevron: a white "fold" pointing down. It overlaps the next step so the step's
     gray-50 top shows through the triangle's empty corners, and a soft shadow falls
     onto the section below (Figma: drop-shadow 0 10px 6px rgba(0,0,0,.02)). */
  .howto-sep{
    display:block;width:100%;height:40px;position:relative;z-index:2;margin-bottom:-40px;
    filter:drop-shadow(0 9px 6px rgba(0,0,0,.022));   /* fold shadow, a touch lighter again */
  }
  .howto-sep--top{filter:drop-shadow(0 10px 6px rgba(0,0,0,.026));}  /* the fold above step 01 */
  .howto-sep path{fill:#fff;}
  .howto-steps>.howto-sep:last-child{margin-bottom:0;}  /* last fold sits on the CTA band below */

  /* ============================================================
     Inline CTA band (Frame 17)
     ============================================================ */
  .cta-band{
    padding:30px 24px 60px;display:flex;flex-direction:column;gap:12px;
    border-bottom:1px solid var(--line3);
  }

  /* ============================================================
     Use case
     ============================================================ */
  .usecase{border-bottom:1px solid var(--line3);}
  .usecase-concept{padding:60px 24px 0;display:flex;flex-direction:column;align-items:center;gap:28px;}
  .usecase-lead{display:flex;flex-direction:column;gap:28px;text-align:left;}
  .usecase-lead .usecase-body{text-align:left;}
  .usecase-lead .usecase-sample-note{text-align:center;}
  .uc-connector{display:flex;justify-content:center;margin-top:-35px;position:relative;z-index:0;}  /* arrow root tucks behind the card */
  .uc-connector img{width:12px;height:67px;display:block;}
  .query-card{
    width:100%;position:relative;z-index:1;
    background:rgba(255,255,255,.7);border:1px solid #fff;border-radius:12px;padding:16px;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 0 24px rgba(110,164,243,.24);   /* Figma: blue-tinted glow */
    display:flex;flex-direction:column;gap:8px;
  }
  .query-card .q{margin:0;font-size:14px;line-height:24px;color:var(--ink3);text-align:left;}
  .query-tags{display:flex;justify-content:space-between;align-items:center;gap:10px;}
  .tag{display:inline-flex;align-items:center;gap:5px;height:23px;padding:0 10px;border-radius:30px;
    font-family:var(--font-en);font-weight:500;font-size:10px;line-height:15px;}
  .tag--udr{background:#fff;border:0;color:var(--muted);padding:4px 10px;border-radius:30px;}
  .tag--udr img{width:12px;height:auto;}   /* UDR fish mark, nudged smaller again */
  .tag--cat{background:#F2F2F2;color:var(--muted);font-family:var(--font-jp);}

  .uc-scroll{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:28px 24px 40px;scroll-padding-left:24px;-webkit-overflow-scrolling:touch;
  }
  .uc-scroll::after{content:"";flex:0 0 12px;}  /* preserve right inset past the last card */
  .uc-scroll::-webkit-scrollbar{height:6px;}
  .uc-scroll::-webkit-scrollbar-thumb{background:#d8dee8;border-radius:3px;}
  .uc-card{
    flex:0 0 305px;scroll-snap-align:start;background:#fff;border:1px solid var(--line);
    border-radius:8px;overflow:hidden;
  }
  .uc-card .head{padding:24px 20px;}   /* FB: no divider between title and preview */
  .uc-card .case{font-family:var(--font-en);font-weight:500;font-size:14px;line-height:21px;color:var(--blue);}
  .uc-card .head h3{margin:12px 0 0;font-family:var(--font-jp);font-weight:600;font-size:18px;line-height:26px;color:var(--ink);}
  .uc-card .body{padding:20px;display:flex;flex-direction:column;gap:24px;}
  .uc-sample{position:relative;height:264px;display:flex;align-items:center;justify-content:center;}
  .uc-sample img{max-height:264px;width:auto;border-radius:8px;box-shadow:0 2px 6px rgba(15,33,66,.22), 0 7px 9px -3px rgba(15,33,66,.30);}
  .preview-btn{
    position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px;
    background:#fff;border-radius:52px;box-shadow:0 2px 10px rgba(0,0,0,.12);
    font-family:var(--font-en);font-weight:500;font-size:12px;color:var(--blue);
  }
  .preview-btn svg{width:20px;height:20px;}

  /* Marlin Insights band (Figma "Section Marlin Insight", SP 393×552) — the last
     block inside Use case, so the section's bottom rule still lands below it.
     Figma stacks heading → text (16 gap), then banner and button at a 32 gap.
     .mi-copy unwraps (display:contents) so the banner can slide in between the
     lead and the button here while staying beside them on PC; the band therefore
     carries the tight 16px gap and the two lower items add the remaining 16px. */
  .mi-band{display:flex;flex-direction:column;gap:16px;padding:0 24px 60px;}
  .mi-copy{display:contents;}
  .mi-title{margin:0;font-family:var(--font-jp);font-weight:600;font-size:18px;line-height:26px;color:var(--ink3);text-align:center;}
  .mi-lead p{margin:0;font-family:var(--font-jp);font-weight:400;font-size:14px;line-height:24px;color:var(--gray600);}
  .mi-banner{order:1;margin-top:16px;border-radius:8px;overflow:hidden;}
  .mi-banner img{width:100%;height:auto;aspect-ratio:1696 / 954;object-fit:cover;}
  .mi-btn{order:2;margin-top:16px;}

  /* ============================================================
     Features / reasons
     ============================================================ */
  .features{padding:60px 24px;display:flex;flex-direction:column;align-items:center;gap:24px;}
  .features-head{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;}
  .features-head .lead-wrap{display:flex;flex-direction:column;gap:0;}
  /* PC-only wrappers (added for the left-aligned/bottom-aligned PC layout below):
     unwrap them here so the SP stack of sec-title/lead/lead/button and its gaps stay exactly as before. */
  .features-row,.features-copy{display:contents;}
  .features-copy .lead{text-align:left;}
  .features-list{display:flex;flex-direction:column;gap:16px;width:100%;}
  .feature-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:24px;display:flex;flex-direction:column;gap:16px;}
  .feature-card .f-head{display:flex;flex-direction:column;gap:8px;}
  .feature-card .f-num{font-family:var(--font-en);font-weight:500;font-size:14px;line-height:21px;color:var(--blue);}
  .feature-card h3{margin:4px 0 0;font-family:var(--font-jp);font-weight:600;font-size:18px;line-height:26px;color:var(--ink);}
  .badge{align-self:flex-start;background:#F9FAFB;color:var(--blue);border-radius:4px;   /* Figma: gray-50 bg */
    padding:4px 8px;font-family:var(--font-en);font-weight:500;font-size:12px;line-height:18px;text-decoration:none;}
  a.badge{transition:background .15s ease;}
  a.badge:hover{background:#EEF3FE;text-decoration:underline;}
  .feature-card .img-ph{height:167px;color:#D6D6D6;}
  .feature-card .feature-img{display:block;width:100%;height:167px;object-fit:contain;}
  .feature-card h4{margin:0 0 4px;font-family:var(--font-jp);font-weight:600;font-size:14px;line-height:21px;color:var(--ink);}
  .feature-card p{margin:0;font-size:14px;line-height:24px;color:var(--gray);}

  /* ============================================================
     User voice
     ============================================================ */
  .voice{padding:60px 24px;display:flex;flex-direction:column;align-items:center;gap:24px;border-top:1px solid var(--border);}  /* FB: full-width bar at the section top, above the βテスト利用者の声 eyebrow (same pattern as PC) */
  .voice-list{display:flex;flex-direction:column;gap:24px;width:100%;}
  .voice-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:28px 24px;display:flex;flex-direction:column;gap:20px;}
  .voice-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;}  /* FB: num pinned left, photo pinned to the card's right edge, both top-aligned; +4px on top of the card's 20px gap = 24px down to the title */
  .voice-num{
    display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;
    border:1px solid var(--blue);color:var(--blue);font-family:var(--font-en);font-weight:500;font-size:14px;
  }
  .voice-photo{width:120px;height:120px;border-radius:8px;object-fit:cover;background:#d9d9d9;}
  .voice-card h3{margin:0;font-family:var(--font-jp);font-weight:600;font-size:16px;line-height:26px;color:var(--blue);}
  .voice-card p{margin:-12px 0 0;font-size:14px;line-height:24px;color:var(--gray600);}
  .voice-card hr{width:100%;height:0;border:0;border-top:1px solid var(--border);margin:0;}
  .voice-info{font-size:12px;line-height:18px;color:var(--gray600);white-space:pre-line;}

  /* ============================================================
     Pricing
     ============================================================ */
  .pricing{background:#F9FAFB;padding:60px 24px;display:flex;flex-direction:column;align-items:center;gap:24px;}
  .plan-list{display:flex;flex-direction:column;gap:16px;width:100%;}
  .plan-card{background:#fff;border:1px solid var(--border);border-radius:8px;padding:32px 24px;display:flex;flex-direction:column;gap:20px;}
  .plan-head h3{margin:0 0 8px;font-family:var(--font-en);font-weight:500;font-size:20px;line-height:26px;color:var(--ink);}
  .plan-head h3.fw-600{font-weight:600;}
  .plan-head p{margin:0;font-size:14px;line-height:24px;color:var(--gray);}
  .plan-price{display:flex;align-items:flex-end;gap:4px;font-family:var(--font-en);color:var(--ink);}
  .plan-price .yen{font-weight:500;font-size:24px;line-height:24px;}
  .plan-price .amt{font-weight:600;font-size:24px;line-height:24px;}
  .plan-price .unit{font-family:var(--font-jp);font-weight:400;font-size:16px;line-height:24px;color:var(--gray);}
  .plan-card hr{width:100%;height:0;border:0;border-top:1px solid var(--line2);margin:0;}
  .check-list{display:flex;flex-direction:column;gap:12px;}
  .check-item{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:24px;color:var(--gray);}
  .check-item::before{
    content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--check-bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4.2l2.6 2.6L9 1' stroke='%236EA4F3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;
  }

  /* ============================================================
     FAQ
     ============================================================ */
  .faq{padding:60px 24px;display:flex;flex-direction:column;gap:24px;}
  .faq .eyebrow{text-align:left;}
  .faq-list{border:1px solid #F3F4F6;border-radius:8px;background:#fff;overflow:hidden;}  /* Figma: one rounded box wraps all Q&A */
  .faq-item{border-bottom:1px solid var(--border);background:transparent;}              /* items separated by a divider, not boxed */
  .faq-item:last-child{border-bottom:0;}
  .faq-item summary{
    list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;
    padding:18px 16px;
  }
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-q{flex:none;width:32px;text-align:left;font-family:var(--font-pt);font-weight:700;font-size:14px;line-height:24px;color:var(--blue);}
  .faq-title{flex:1;font-family:var(--font-jp);font-weight:600;font-size:14px;line-height:24px;color:var(--ink);}
  .faq-toggle{position:relative;flex:none;width:20px;height:20px;margin-top:2px;}
  .faq-toggle::before,.faq-toggle::after{
    content:"";position:absolute;left:50%;top:50%;background:var(--blue);transform:translate(-50%,-50%);
  }
  .faq-toggle::before{width:10px;height:1.5px;}
  .faq-toggle::after{width:1.5px;height:10px;transition:opacity .2s;}
  .faq-item[open] .faq-toggle::after{opacity:0;}
  .faq-answer{padding:0 16px 20px 60px;font-size:14px;line-height:24px;color:var(--gray);}

  /* ============================================================
     Big CTA
     ============================================================ */
  .cta{                                           /* light section: dark copy, faint fish school, giant ghost wordmark */
    position:relative;overflow:hidden;background:var(--bg-gray-50,#F9FAFB);
    padding:140px 24px;display:flex;flex-direction:column;align-items:center;gap:28px;
  }
  /* superseded for now by .flock-bg (the p5 boids canvas) — kept here, disabled, in
     case we want the static fish layers back alongside/instead of it later.
  .cta::before{                                   // Figma layer 1: fish school bleeding off the top-right
    content:"";position:absolute;right:-360px;top:-300px;width:900px;height:900px;z-index:0;
    background:url(/assets/marlin/hero-fish.png) center/contain no-repeat;
    opacity:.55;mix-blend-mode:multiply;pointer-events:none;
  }
  .cta::after{                                    // Figma layer 2: a second fish cluster down the left edge
    content:"";position:absolute;left:-230px;top:0;width:520px;height:680px;z-index:0;
    background:url(/assets/marlin/cta-fish-2.png) center/contain no-repeat;
    opacity:.17;mix-blend-mode:multiply;pointer-events:none;
  }
  */
  .cta h2{
    position:relative;z-index:1;margin:0;text-align:center;color:var(--ink2);
    font-family:var(--font-jp);font-weight:600;font-size:20px;line-height:30px;
  }
  .cta-btns{position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;width:100%;max-width:345px;}
  .cta .btn{max-width:345px;}
  .cta-inquiry{display:block;position:relative;z-index:1;text-align:center;white-space:nowrap;font-size:14px;line-height:24px;font-weight:700;color:#000;}
  .cta-inquiry a{color:#000;text-decoration:underline;text-underline-offset:3px;}
  .cta-ghost{                                     /* giant faint wordmark, endless horizontal marquee */
    position:absolute;left:0;bottom:0;z-index:0;width:100%;
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
    overflow:hidden;pointer-events:none;
    transform:translateY(15%);
  }
  .cta-ghost span{
    display:block;width:auto;flex-shrink:0;white-space:nowrap;padding-right:.6em;
    font-family:var(--font-en);font-weight:500;font-size:60px;line-height:1;color:var(--border);
  }
  .cta-ghost span:nth-child(odd){animation:ctaGhostMove1 72s linear -36s infinite;}
  .cta-ghost span:nth-child(2n){animation:ctaGhostMove2 72s linear infinite;}

  /* ============================================================
     Footer
     ============================================================ */
  .footer{background:#fff;padding-top:40px;}
  .footer-logo{display:flex;justify-content:flex-start;padding:0 12px;}
  .footer-logo img{height:44px;width:auto;}
  .footer-links{padding:20px 24px;}
  .foot-link{
    display:flex;align-items:center;justify-content:space-between;
    padding:20px 8px;border-bottom:1px solid var(--line2);
    font-family:var(--font-jp);font-weight:400;font-size:14px;color:var(--ink2);
  }
  .foot-link:first-child{border-top:1px solid var(--line2);}
  .foot-link::after{
    content:"";width:7px;height:7px;border-top:1.5px solid var(--gray);border-right:1.5px solid var(--gray);
    transform:rotate(45deg);
  }
  .copyright{padding:20px 24px calc(40px + env(safe-area-inset-bottom));font-family:var(--font-en);font-weight:400;font-size:12px;line-height:18px;color:var(--gray);}

  /* ============================================================
     i18n — language toggle (JA is default; .lang-en on <html> shows EN)
     ============================================================ */
  .t-en{display:none;}
  html.lang-en .t-ja{display:none;}
  html.lang-en .t-en{display:revert;}
  /* price blocks: keep ¥ / amount / unit as flat flex children */
  .plan-price .t-ja{display:contents;}
  .plan-price .t-en{display:none;}
  html.lang-en .plan-price .t-ja{display:none;}
  html.lang-en .plan-price .t-en{display:contents;}

  /* ============================================================
     Fluid fill (above phone, below the PC breakpoint)
     Section backgrounds stay full-bleed (they already span 100%); only the
     in-flow content is centred and capped at --sp-content via --gutter.
     Every value collapses to its original phone gutter (24px / 12px) at phone
     widths because --gutter's lower bound is the phone gutter — so the <=430px
     layout is byte-for-byte unchanged; centring engages only past ~728px.
     ============================================================ */
  .about-concept,
  .point-list,
  .howto-head,
  .howto-step,
  .cta-band,
  .usecase-concept,
  .features,
  .voice,
  .pricing,
  .faq,
  .cta{
    padding-inline:var(--gutter);
  }
  .uc-scroll{padding-inline:var(--gutter);scroll-padding-left:var(--gutter);}
  .footer-links,.copyright{padding-inline:var(--gutter);}
  .footer-logo{padding-inline:max(12px, calc((100% - var(--sp-content)) / 2));}
}

/* ===== SP — centre the use-case carousel on the first card =====
   On phones, snap each card to the viewport centre so Case 01 sits in the
   middle on load (aligned under the down-arrow) instead of left-flush. Side
   padding centres the 305px card; the 80px cap keeps wider phones from opening
   up huge gaps. Above 600px the base start-snap layout is unchanged. */
@media (max-width: 600px){
  .uc-scroll{
    padding-inline:clamp(24px, calc((100% - 305px) / 2), 80px);
    scroll-padding-inline:0;
  }
  .uc-card{scroll-snap-align:center;}
}

/* ===== PC (desktop) — >= 1024px ===== */
@media (min-width: 1024px){
  /* ============================================================
     Sakana Marlin landing page — PC (desktop) layout  /marlin/ (>=1024px)
     Built from Figma "SakanaMarlin_LP_0613_v1.2" TOP/Full (node 52:18129),
     a 1920px-wide comp. Applies to the same SP markup (<div class="sp">);
     the wrapper's --u scaling vars cascade to every descendant below.

     Sizing model
     ------------
     The comp is authored at 1920px. Every dimension below is written in the
     comp's native px via `calc(N * var(--u))`, where --u == "one design px".
     --u is FROZEN at 0.75px (the comp rendered at the 1440px target viewport),
     so type, spacing, radii etc. are fixed like a normal site and no longer
     scale with the viewport. Responsiveness between 1024 and 1920 comes from
     the layout layer instead: fluid gutters (--gut), a capped content column
     (--content / --content-max = 1290px, centred past 1440), and fluid
     grid/flex tracks in the sections that would overflow at 1024.
     ============================================================ */

  :root{
    --blue:#6EA4F3;
    --blue-light:#7BADF4;
    --ink:#26272C;
    --ink2:#1E1E1E;
    --ink3:#262626;    /* gray/800 — headings/hero copy */
    --gray:#6C717E;
    --gray600:#6B7280; /* gray/600 — lead/body copy */
    --muted:#9CA2AC;
    --red:#E10600;
    --border:#E5E7EB;  /* gray/200 — card borders */
    --blue100:#E2EEFF; /* blue/100 — product band bg */

    --bg-blue:#F8FBFF;
    --bg-gray:#FAFAFA;
    --bg-band:#E8F1FF;
    --chip:#F0F5FD;
    --check-bg:#EDF4FF;
    --placeholder:#EDEDED;

    --line:#E5E5E5;
    --line2:#EFEFEF;
    --line3:#DEDEDE;

    --font-en:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
    --font-jp:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",sans-serif;
    --font-pt:"PT Sans",sans-serif;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overflow-x:clip;}
  html{scroll-behavior:smooth;}
  body{
    background:#fff;
    color:var(--gray);
    font-family:var(--font-jp);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  img{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}

  /* full-width desktop canvas ---------------------------------- */
  .sp{
    --u:0.75px;                     /* 1 design px, frozen at the 1440px render (comp × 0.75) */
    --content-max:1290px;           /* inner content cap = 1720 × 0.75 */
    --gut:max(40px, calc((100% - var(--content-max)) / 2));  /* fluid side gutter: 40px floor at 1024, 75px at 1440 (the old look), grows past 1440 so content stays capped/centred */
    --content:min(var(--content-max), 100%);/* inner content width */
    position:relative;
    width:100%;
    margin:0 auto;
    padding-top:calc(120 * var(--u));   /* reclaim the flow space the now-fixed header no longer reserves */
    background:#fff;
    font-size:calc(16 * var(--u));
    line-height:1.6;
    overflow-x:clip;
  }

  /* a centred inner column used by most sections */
  .pad{padding-left:var(--gut);padding-right:var(--gut);}

  section[id]{scroll-margin-top:calc(120 * var(--u));}

  /* ---------- shared bits ---------- */
  /* SectionTitle (Figma): eyebrow 20/30, h2 38/54, 12 gap; lead 20/36 — uniform across every section */
  .eyebrow{
    font-family:var(--font-jp);font-weight:600;
    font-size:calc(20 * var(--u));line-height:calc(30 * var(--u));
    color:var(--blue);
  }
  .sec-title{display:flex;flex-direction:column;align-items:center;gap:calc(12 * var(--u));text-align:center;}
  .sec-title h2{
    margin:0;font-family:var(--font-jp);font-weight:600;
    font-size:calc(38 * var(--u));line-height:calc(54 * var(--u));
    color:var(--ink3);
  }
  .lead{margin:0;text-align:center;color:var(--gray600);
    font-size:18px;line-height:32px;font-weight:400;}
  .lead .hl{color:var(--blue);}

  /* ---------- buttons ---------- */
  .btn{
    display:flex;align-items:center;justify-content:center;gap:calc(10 * var(--u));
    height:calc(62 * var(--u));padding:0 calc(28 * var(--u));border-radius:calc(8 * var(--u));
    font-family:var(--font-jp);font-weight:600;
    font-size:calc(16 * var(--u));line-height:calc(24 * var(--u));
    cursor:pointer;border:calc(1 * var(--u)) solid transparent;transition:opacity .15s,background .15s,color .15s,border-color .15s;
    white-space:nowrap;
  }
  .btn:hover{opacity:.9;}
  .btn--primary{background:var(--blue);color:#fff;}
  .btn--outline{background:#fff;color:var(--blue);border-color:var(--blue);}
  .btn .ext-ico{width:calc(18 * var(--u));height:calc(18 * var(--u));flex:none;}

  /* ============================================================
     Header — PC horizontal navbar (Figma PC/groNav, 1920×120)
     The SP markup (logo + burger + .menu-overlay) is reshaped with CSS:
     the overlay's first link group + lang toggle + login are floated into
     the bar; the overflow groups (Other Products / Follow us) and the About
     link are hidden (they live behind the burger on PC).
     ============================================================ */
  .site-header{
    /* fixed (not sticky) so the bar shares the SAME viewport-anchored reference
       as the .menu-overlay nav (also fixed). Both then move identically during
       overscroll/rubber-band at the top/bottom — a sticky header would bounce
       with the page while the fixed nav stayed put, splitting logo from nav.
       .sp gets a matching padding-top to reclaim the flow space sticky used to. */
    position:fixed;top:0;left:0;right:0;z-index:100;
    display:flex;align-items:center;justify-content:space-between;
    height:calc(120 * var(--u));padding:0 calc(40 * var(--u));
    background:rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border-bottom:calc(1 * var(--u)) solid var(--border);   /* Figma: gray/200 #E5E7EB hairline under the bar */
  }
  .hd-logo{display:flex;align-items:center;gap:calc(8 * var(--u));}
  .site-header .logo{height:calc(50 * var(--u));width:auto;}   /* Figma logo glyph h≈25 → 50px tall image */
  .hd-logo::after{                        /* "Ultra Deep Research" tagline (CSS, keeps DOM identical) */
    content:"Ultra Deep Research";
    font-family:var(--font-en);font-weight:400;
    font-size:calc(20 * var(--u));line-height:1;color:var(--gray600);white-space:nowrap;
  }

  /* burger sits at the far right on PC too */
  .burger{
    display:flex;flex-direction:column;justify-content:center;gap:calc(6 * var(--u));
    width:calc(42 * var(--u));height:calc(42 * var(--u));padding:0 calc(6 * var(--u));
    background:none;border:0;cursor:pointer;order:3;
  }
  .burger span{display:block;height:calc(2 * var(--u));width:calc(30 * var(--u));
    background:#000;border-radius:calc(2 * var(--u));transition:.25s;}   /* SP-matched 3-bar icon */
  .burger.open span:nth-child(1){transform:translateY(calc(8 * var(--u))) rotate(45deg);}
  .burger.open span:nth-child(2){opacity:0;}
  .burger.open span:nth-child(3){transform:translateY(calc(-8 * var(--u))) rotate(-45deg);}

  /* nav: float the overlay's links/lang/login into the bar.
     fixed (not absolute) so the nav/lang/login stay pinned with the sticky header
     on scroll instead of scrolling away with the page. */
  .menu-overlay{
    position:fixed;top:0;left:0;right:0;height:calc(120 * var(--u));z-index:101;
    display:flex;align-items:center;justify-content:flex-end;
    padding:0 calc(67 * var(--u)) 0 0;     /* clear the burger on the right; login right edge ≈1813 (Figma) */
    pointer-events:none;
  }
  .menu-overlay .menu-scroll{
    width:100%;padding:0 calc(40 * var(--u));
    display:flex;align-items:center;justify-content:flex-end;gap:calc(39 * var(--u));
  }
  .menu-overlay a,.menu-overlay .menu-lang{pointer-events:auto;}
  /* flatten the first group so its links + login become bar items we can order */
  .menu-overlay .menu-group:first-child{display:contents;}
  .menu-overlay .menu-group:nth-child(2),
  .menu-overlay .menu-group:nth-child(3){display:none;}   /* overflow-only on PC */
  .menu-link{
    order:1;position:relative;display:flex;align-items:center;height:auto;padding:0;
    font-family:"PT Sans",var(--font-jp);font-weight:700;   /* Figma groNav = PT Sans Bold (Latin); JP glyphs fall back to Hiragino */
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;   /* thinner/lighter glyph render to match Figma */
    font-size:calc(16 * var(--u));line-height:1;color:var(--muted);white-space:nowrap;   /* Figma: gray/400 #9CA2AC nav text */
  }
  .menu-link[href="#about"]{display:none;}   /* "Sakana Marlinとは" -> behind burger */
  /* scroll-spy: JS adds .is-active to the link whose section is in view (black text).
     The underline itself is a single shared element (.nav-indicator, below) that GSAP
     slides/resizes to the active link's position instead of snapping per-link. */
  .menu-link.is-active{color:#000;}
  .nav-indicator{
    /* Figma: the bar spans the full nav button (text + 20px padding each side) and
       sits at the very bottom of the 120px bar — not just the text width.
       Positioned against .menu-overlay (the fixed, exactly-120px-tall bar), so
       bottom:0 lands flush with the bar's (and header's) bottom edge.
       left/width are set by JS (GSAP) to match the active link's measured rect. */
    position:absolute;left:0;width:0;bottom:0;
    height:calc(2 * var(--u));background:#000;opacity:0;pointer-events:none;
  }
  .menu-lang{
    order:2;margin-left:calc(19 * var(--u));   /* Figma FAQ→lang gap ≈61 (= 42 base + 19) */
    position:relative;display:flex;align-items:center;
  }
  /* trigger pill: Figma btn/language — white pill, gray/600 "Japanese ⌄" */
  .menu-lang .lang-current{
    display:flex;align-items:center;gap:calc(13 * var(--u));
    height:calc(42 * var(--u));padding:0 calc(16 * var(--u));
    font-family:var(--font-en);font-weight:500;font-size:calc(16 * var(--u));color:var(--gray600);
    background:#fff;border:calc(1 * var(--u)) solid var(--border);
    border-radius:calc(40 * var(--u));cursor:pointer;white-space:nowrap;
  }
  .menu-lang .lang-current::after{      /* dropdown caret */
    content:"";width:calc(6 * var(--u));height:calc(6 * var(--u));margin-left:calc(2 * var(--u));
    border-right:calc(1.5 * var(--u)) solid var(--gray600);border-bottom:calc(1.5 * var(--u)) solid var(--gray600);
    transform:translateY(calc(-2 * var(--u))) rotate(45deg);transition:transform .2s ease;
  }
  .menu-lang.lang-open .lang-current::after{transform:translateY(calc(2 * var(--u))) rotate(-135deg);}  /* flip up when open */
  /* dropdown panel: hidden until the pill is clicked */
  .menu-lang .lang-options{
    display:none;position:absolute;top:calc(100% + calc(8 * var(--u)));right:0;
    flex-direction:column;min-width:100%;z-index:120;
    background:#fff;border:calc(1 * var(--u)) solid var(--border);border-radius:calc(12 * var(--u));
    box-shadow:0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(15,33,66,.12);padding:calc(6 * var(--u));
  }
  .menu-lang.lang-open .lang-options{display:flex;}
  .menu-lang .lang-options .sep{display:none;}   /* no separator in the dropdown */
  .menu-lang .lang-options a{
    display:block;padding:calc(8 * var(--u)) calc(14 * var(--u));border-radius:calc(8 * var(--u));
    font-family:var(--font-en);font-weight:500;font-size:calc(16 * var(--u));color:var(--gray600);
    white-space:nowrap;cursor:pointer;text-decoration:none;
  }
  .menu-lang .lang-options a:hover{background:var(--chip);}
  .menu-lang .lang-options a.active{color:var(--blue);}   /* highlight the current language */
  .menu-login{
    order:3;margin:0;width:auto;height:calc(42 * var(--u));padding:0 calc(24 * var(--u));
    border-radius:calc(38 * var(--u));font-size:calc(16 * var(--u));   /* Figma btn/login: black pill (via .btn--black) */
  }
  .menu-social{display:none;}

  /* ============================================================
     Burger slide-out drawer (PC). A SEPARATE element (.pc-drawer) so the
     header's in-bar nav (.menu-overlay) STAYS visible while the drawer is
     open — the drawer slides in over the right edge, the bar nav remains
     beneath/beside it. (FB: SP-like hamburger menu, from the right, SP width.)
     ============================================================ */
  html.menu-open,body.menu-open{overflow:hidden;}
  /* scroll-lock compensation (see the --sbw note in the shared block up top):
     pad the fixed bars by the vanished scrollbar's width so the burger, the
     in-bar nav links (and with them the JS-placed .nav-indicator, measured from
     the bar's unmoved left edge) all hold their scrollbar-era positions, while
     the drawer itself stretches flush to the now-bare window edge. */
  body.menu-open .site-header{padding-right:calc(40 * var(--u) + var(--sbw,0px));}
  body.menu-open .menu-overlay{padding-right:calc(67 * var(--u) + var(--sbw,0px));}
  .pc-drawer{
    position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;
    z-index:200;                             /* above the header — the bar nav stays visible behind the (scrim-less) overlay */
    padding:0;display:flex;justify-content:flex-end;align-items:stretch;
    background:none;                         /* no scrim — the page + header nav stay fully visible */
    pointer-events:none;visibility:hidden;   /* inert until opened */
  }
  .pc-drawer.open{pointer-events:auto;visibility:visible;}   /* captures outside clicks (click-to-close) */
  /* close (X) button rendered on the panel itself (vs SP, which closes via the header burger).
     positioned to overlap the header burger exactly: same box (right 40u, vertically
     centred in the 120u header → top 39u) and same 42u size, so the X sits on the icon. */
  .pc-drawer.open .menu-close{
    display:flex;align-items:center;justify-content:center;
    position:fixed;top:calc(39 * var(--u));right:calc(40 * var(--u) + var(--sbw,0px));   /* +--sbw: track the scroll-lock-compensated burger it must sit on */
    width:calc(42 * var(--u));height:calc(42 * var(--u));z-index:201;
    background:none;border:0;cursor:pointer;pointer-events:auto;
  }
  .pc-drawer .menu-close::before,
  .pc-drawer .menu-close::after{
    content:"";position:absolute;left:50%;top:50%;width:26px;height:2px;
    background:#000;border-radius:2px;
  }
  .pc-drawer .menu-close::before{transform:translate(-50%,-50%) rotate(45deg);}
  .pc-drawer .menu-close::after{transform:translate(-50%,-50%) rotate(-45deg);}
  .pc-drawer .menu-scroll{
    width:var(--maxw,430px);max-width:100%;height:100%;
    background:#f8f8f8;overflow-y:auto;
    box-shadow:0 0 calc(40 * var(--u)) rgba(15,33,66,.18);
    display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:calc(120 * var(--u) + 24px) 40px 40px;   /* clear the fixed header, then SP-like padding */
    transform:translateX(100%);                       /* tucked off the right edge while closed */
  }
  .pc-drawer.open .menu-scroll{animation:menuSlideIn .18s cubic-bezier(.22,.61,.36,1) both;}
  @keyframes menuSlideIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
  /* closing: reverse the slide — the panel tucks back off the right edge before it goes inert */
  .pc-drawer.open.closing .menu-scroll{animation:menuSlideOut .18s cubic-bezier(.55,.06,.68,.19) both;}
  @keyframes menuSlideOut{from{transform:translateX(0);}to{transform:translateX(100%);}}
  /* SP-sheet layout inside the panel (fixed px — width is the SP width) */
  .pc-drawer .menu-group{display:flex;flex-direction:column;padding:20px 0;}
  /* FB: divider must bleed full-bleed across the whole 430px panel, not just the
     350px padded content column — bow it out by the panel's own 40px side padding via
     an ::after instead of a plain border-bottom (which would be inset to the column). */
  .pc-drawer .menu-group:first-child{position:relative;padding-bottom:40px;}
  .pc-drawer .menu-group:first-child::after{
    content:"";position:absolute;left:-40px;right:-40px;bottom:0;
    border-bottom:1px solid var(--border);
  }
  .pc-drawer .menu-label{margin:0 0 8px;font-family:var(--font-en);font-weight:500;
    font-size:12px;line-height:18px;color:var(--gray);}
  .pc-drawer .menu-link{
    order:0;display:flex;align-items:center;justify-content:flex-start;gap:10px;
    height:50px;padding:0 0 0 12px;
    font-family:var(--font-jp);font-weight:600;font-size:16px;line-height:26px;color:var(--ink3);
  }
  .pc-drawer .menu-link[href="#about"]{display:flex;}      /* About link belongs in the sheet */
  .pc-drawer .menu-link.is-active{color:var(--ink3);}      /* no in-bar active state in the sheet */
  .pc-drawer .menu-login{
    order:0;margin-top:20px;align-self:stretch;width:auto;height:calc(62 * var(--u));
    padding:0;border-radius:calc(8 * var(--u));font-size:16px;
  }
  .pc-drawer .menu-social{display:flex;gap:8px;}
  .pc-drawer .menu-social a{display:flex;align-items:center;justify-content:center;width:40px;height:40px;}
  .pc-drawer .menu-social svg{width:24px;height:24px;}
  .pc-drawer .menu-lang{
    order:0;margin:0;height:auto;padding:20px 0;gap:8px;justify-content:flex-end;
    position:static;background:none;border:0;border-radius:0;
    font-family:var(--font-jp);font-weight:600;font-size:14px;color:var(--ink3);
  }
  .pc-drawer .menu-lang .lang-current{display:none;}        /* sheet uses the inline JA / EN toggle, not the pill */
  .pc-drawer .menu-lang .lang-options{                      /* render inline, SP-style — drop the dropdown panel chrome */
    display:flex;flex-direction:row;justify-content:flex-end;align-items:center;gap:8px;position:static;
    background:none;border:0;border-radius:0;box-shadow:none;padding:0;
  }
  .pc-drawer .menu-lang .sep{display:inline;font-size:16px;}
  .pc-drawer .menu-lang a[data-lang="ja"],
  .pc-drawer .menu-lang a[data-lang="en"]{                  /* JA / EN both shown, SP-style */
    display:inline;padding:0;font-family:var(--font-jp);font-weight:600;font-size:14px;color:var(--ink3);
  }
  .pc-drawer .menu-lang a:hover{background:none;}
  .pc-drawer .menu-lang .active{text-decoration:underline;text-underline-offset:4px;color:var(--ink3);}
  html.lang-en .pc-drawer .menu-lang a[data-lang="ja"]{display:inline;}

  /* ============================================================
     Hero / KV (Figma KV 1920×820)
     Left copy column (x100), right product mock (x830), left scroll hint.
     ============================================================ */
  .hero{
    /* copy column (fixed 420) left, product mock (fluid, ≤743) right; the 1fr
       edge rows centre the copy block while the mock spans and self-centres —
       reproduces the old absolute layout at 1440 and reflows below it */
    position:relative;min-height:calc(820 * var(--u));background:#fff;overflow:hidden;
    display:grid;
    grid-template-columns:calc(560 * var(--u)) minmax(0, calc(990 * var(--u)));
    grid-template-rows:1fr auto auto auto 1fr;
    justify-content:space-between;column-gap:clamp(24px, 3vw, 96px);
    padding:0 var(--gut);
  }
  /* the fish pseudos are viewport-centre anchored so every width shows the same
     slice of the school the centred 1440 render did */
  .hero::before{                          /* fish school — Figma KV rect 52:18131, exported SVG (rotated −45.71°, opacity .3 + multiply baked in). viewBox 1826×820: full rotated artwork incl. the part beyond the 1920 frame edge (x763→2589), so wide screens show the school continuing right instead of a hard cut */
    content:"";position:absolute;left:calc(50% - 147.75px);top:0;right:auto;
    width:calc(1826 * var(--u));height:calc(820 * var(--u));z-index:0;
    background:url(/assets/marlin/hero-fish-pc.svg) left top/100% 100% no-repeat;
    mix-blend-mode:multiply;pointer-events:none;
  }
  .hero::after{                           /* 2nd school — Figma KV rect 52:18132, exported SVG (opacity .3 + multiply baked in). viewBox 834×770 == hero centre region x443→1277, y50→820 */
    content:"";position:absolute;left:calc(50% - 387.75px);top:calc(50 * var(--u));
    width:calc(834 * var(--u));height:calc(770 * var(--u));z-index:0;
    background:url(/assets/marlin/hero-fish-pc-2.svg) left top/100% 100% no-repeat;
    mix-blend-mode:multiply;pointer-events:none;
  }
  .hero-copy,.hero-lead,.hero-mock-wrap,.hero-cta{position:relative;z-index:1;}
  .hero-copy{grid-column:1;grid-row:2;}
  .hero-copy h1{
    margin:0;font-family:var(--font-en);font-weight:500;
    font-size:calc(60 * var(--u));line-height:calc(70 * var(--u));
    color:var(--ink3);letter-spacing:0;
  }
  .hero-copy h1 span{display:inline;white-space:nowrap;}   /* spacing between spans comes from a real space in the HTML now (a ::before-generated space gets collapsed away once SplitText forces these spans to inline-block); nowrap keeps each word from breaking mid-word between its individual .char-mask letters */
  .hero-lead{
    grid-column:1;grid-row:3;margin:calc(23 * var(--u)) 0 0;   /* Figma: h1 bottom (244+2×70=384) → lead top 407 */
    color:var(--gray600);font-family:var(--font-jp);font-weight:300;   /* Figma KV lead = Hiragino W3 (light); 500 read too dark vs comp */
    font-size:calc(24 * var(--u));line-height:calc(36 * var(--u));white-space:nowrap;
  }
  .hero-lead br{display:none;}   /* Figma lead is one line (frame 52:18138 h36); SP <br> dropped on PC */
  .hero-mock-wrap{
    grid-column:2;grid-row:1 / -1;align-self:center;justify-self:end;
    width:100%;max-width:calc(990 * var(--u));aspect-ratio:990 / 571;height:auto;
  }
  .hero-mock-frame{                                          /* Figma "mock" frame: faint panel + bezel around the video */
    position:relative;width:100%;height:100%;box-sizing:border-box;
    padding:calc(14 * var(--u));                            /* Figma bezel (img inset ~1.41%) */
    border-radius:calc(22 * var(--u));                      /* Figma 22px frame corner */
    background:linear-gradient(to bottom,#fdfdfd,#f9fafb);  /* faint near-white panel (Figma bg layer) */
    box-shadow:0 calc(20 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.07);   /* Figma drop-shadow */
  }
  .hero-mock-frame::before{                                  /* faint blue hairline: white at top-left -> #6EA4F3 (Figma blue-line) */
    content:"";position:absolute;inset:0;border-radius:inherit;padding:calc(2 * var(--u));
    background:linear-gradient(135deg,rgba(255,255,255,.8) 0%,rgba(110,164,243,.25) 55%,rgba(110,164,243,.32) 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;     /* keep only the border ring, following the radius */
    pointer-events:none;
  }
  .hero-mock{
    display:block;width:100%;height:100%;max-width:none;
    border-radius:calc(9 * var(--u));                       /* inner corner (concentric with the frame) */
    object-fit:cover;
  }
  .hero-cta{grid-column:1;grid-row:4;margin:calc(60 * var(--u)) 0 0;width:calc(557 * var(--u));max-width:100%;
    display:flex;flex-direction:row-reverse;gap:calc(24 * var(--u));}   /* FB: 無料トライアル申請 left, 今すぐはじめる right; Figma: lead bottom (407+36=443) → CTA top 503 */
  .hero-cta .btn{flex:1;padding:0;}

  /* vertical scroll hint on the left edge */
  .scroll-hint{
    position:absolute;left:clamp(6px, calc(var(--gut) - 48px), calc(36 * var(--u)));top:calc(560 * var(--u));z-index:2;
    display:flex;flex-direction:column;align-items:center;gap:calc(16 * var(--u));
    pointer-events:none;
  }
  .scroll-hint .sd-sp{display:none;}        /* PC shows "scroll" (Figma); SP keeps "Scroll down" */
  .scroll-hint .sd-pc{display:inline;}
  .scroll-hint span{
    writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:normal;   /* Figma: 16px, default tracking */
    font-family:var(--font-en);font-weight:500;font-size:calc(16 * var(--u));color:var(--gray600);opacity:.5;
  }
  .scroll-track{position:relative;width:calc(2 * var(--u));height:calc(160 * var(--u));}
  .scroll-line{position:absolute;left:0;top:0;bottom:0;width:calc(2 * var(--u));
    background:rgba(108,113,126,.2);border-radius:1px;}
  .scroll-fish{                 /* SP-matched: filled gray fish on a white disc, riding/occluding the line — box 26px */
    display:block;position:absolute;left:50%;top:0;width:calc(26 * var(--u));height:calc(26 * var(--u));
    max-width:none;             /* escape the global img{max-width:100%}, else the 2px-wide track clamps it to ~2px */
    transform:translateX(-50%);
    animation:scrollFish 2.4s cubic-bezier(.45,0,.55,1) infinite;
  }
  @keyframes scrollFish{
    0%{transform:translate(-50%,0);opacity:0;}
    12%{opacity:1;}82%{opacity:1;}
    100%{transform:translate(-50%,calc(134 * var(--u)));opacity:0;}  /* swim = track 160 − disc 26; range unchanged */
  }
  /* ≥1440: stop tracking the viewport edge; freeze at the 1440px-viewport position
     (viewport-centre − 720px + 27px), matching the rest of the hero content,
     which caps at 1290px centred (the 1440 render) and only gains side
     whitespace on wider screens */
  @media (min-width: 1440px){
    .scroll-hint{left:calc(50% - 720px + 36 * var(--u));}
  }

  /* PC line breaks: SP-only <br> tags drop out so PC follows Figma's line
     breaking (About lead, Point 02/03 titles, User-voice heading). */
  br.sp-br{display:none;}

  /* ============================================================
     About (Figma about 1920×1646)
     Row 1: centred title + 5-line lead. Row 2: product card (left, 555) +
     3 point cards stacked (right, 1137).
     ============================================================ */
  .about{
    position:relative;background:#fff;
    display:grid;grid-template-columns:minmax(0, 555fr) minmax(0, 1137fr);   /* Figma 555 + 1137 ratio, fluid below the --gut-capped content width */
    column-gap:calc(28 * var(--u));row-gap:calc(98 * var(--u));   /* Figma: lead-bottom(502) → Frame63(602) = 100 */
    justify-content:center;align-items:start;
    padding:calc(120 * var(--u)) var(--gut) calc(120 * var(--u));
  }
  .about-concept{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;gap:calc(42 * var(--u));}
  /* SectionTitle now uniform (eyebrow 20/30, h2 38/54, gap 12) via the shared rules above. */
  .about-concept .sec-title{width:100%;}
  /* Lead is centered in a centred 860 block (JA mirrors EN: natural reflow, breaks only between paragraphs) */
  .about-lead{display:flex;flex-direction:column;align-items:stretch;gap:0;width:min(calc(860 * var(--u)), 100%);margin-inline:auto;}
  .about-lead .lead{
    font-family:var(--font-jp);font-weight:400;
    font-size:18px;line-height:34px;   /* Figma 52:18147: 20px text, lines stepped 38px apart */
    color:var(--gray600);text-align:left;margin:0;
  }
  .about-lead .lead .hl{color:var(--blue);}

  .product-band{                          /* portrait product card (PC-specific image, CSS-swapped) */
    grid-column:1;width:100%;aspect-ratio:555 / 740;height:auto;
    border-radius:calc(16 * var(--u));overflow:hidden;
    background-image:url(/assets/marlin/about-product-pc.png);
    background-size:cover;background-position:center;
    position:sticky;top:calc(50vh - 370 * var(--u));   /* pins centred while point-list scrolls past; releases flush with point-list's end (native sticky containing-block behaviour) */
  }
  html.lang-en .product-band{
    background-image:url(/assets/marlin/about-product-pc_en.png);
  }
  .product-band img{display:none;}
  html.lang-en .product-band img{display:none;}

  /* margin-top pushes the cards down within the row so they rise up into view from
     below the sticky product-band, and gives the column the extra scroll runway the
     gimmick needs (the cards alone aren't tall enough for a noticeable sticky hold). */
  .point-list{grid-column:2;display:flex;flex-direction:column;gap:calc(24 * var(--u));margin-top:0;}
  .point-card{                            /* Figma about card 52:18157: p-60, border-2 #F3F4F6, gap-20 */
    background:#fff;border:calc(2 * var(--u)) solid #F3F4F6;border-radius:calc(20 * var(--u));
    padding:calc(60 * var(--u));display:flex;flex-direction:column;gap:calc(20 * var(--u));
    min-height:calc(292 * var(--u));justify-content:center;
  }
  .point-card .ptag{
    display:flex;gap:calc(4 * var(--u));
    font-family:var(--font-en);font-weight:500;font-size:18px;line-height:27px;color:var(--blue);
  }
  .point-card .ptxt{display:flex;flex-direction:column;gap:calc(8 * var(--u));}
  .point-card h3{margin:0;font-family:var(--font-jp);font-weight:600;
    font-size:calc(28 * var(--u));line-height:calc(42 * var(--u));color:var(--ink3);}
  .point-card p{margin:0;font-family:var(--font-jp);font-weight:400;
    font-size:18px;line-height:32px;color:var(--gray600);}

  /* ============================================================
     How to use (Figma HowToUse 1920×1107.5)
     Centred title; 3 step columns (640 each) with giant watermark numerals.
     ============================================================ */
  .howto{padding-bottom:0;border-top:calc(1 * var(--u)) solid var(--border);}  /* FB: full-width bar at the section top, above the 使い方 eyebrow */
  .howto-head{padding:calc(120 * var(--u)) var(--gut) calc(60 * var(--u));
    display:flex;flex-direction:column;align-items:center;gap:calc(16 * var(--u));}
  .howto-steps{display:grid;grid-template-columns:repeat(3, minmax(0, 640px));justify-content:center;   /* the 3 columns split the viewport up to the comp's 640px each; ≥1920 the 1920px layout stays centred (borders remain full-bleed) */
    border-top:calc(1 * var(--u)) solid #D1D5DB;border-bottom:calc(1 * var(--u)) solid #D1D5DB;}  /* FB: box top+bottom border, a touch darker (gray/300) */
  .howto-sep{display:none;}                /* no white folds on PC */
  .howto-step{
    position:relative;overflow:hidden;text-align:center;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(20 * var(--u));
    padding:clamp(40px, 5.2083vw, 100px);            /* Figma: p-100 all sides — comp 100/1920, reaching the full 100px at ≥1920; tightens below so the illustrations keep room */
    background:linear-gradient(90deg,#F9FAFB 0%,#FFFFFF 50%);   /* Figma: horizontal fold (gray-50 left → white) */
  }
  /* Figma: col1's white folds into the next column (right-pointing apex). FB: the fold
     read too gentle/wide vs Figma — tighten the wedge (steeper crease) and give it a more
     defined drop-shadow. The big numeral sits BEHIND it. */
  .howto-step::before{
    content:"";position:absolute;left:-1px;top:0;height:100%;width:calc(64 * var(--u) + 1px);z-index:1;
    /* left:-1px / +1px width: the drop-shadow filter rasterizes this fold into an integer-snapped
       buffer, so at fractional column widths (--u = viewport/1920) its white left edge can snap 1px
       inward and expose the step's #F9FAFB gradient edge as a 1px seam (e.g. viewport 1520). Bleeding
       1px into the previous white column guarantees the boundary pixel is always covered; the right
       apex stays put (-1px + (64u + 1px) = 64u). */
    background:#fff;clip-path:polygon(0 0, 100% 50%, 0 100%);
    filter:drop-shadow(calc(12 * var(--u)) 0 calc(12 * var(--u)) rgba(0,0,0,.80));
  }
  /* col 1's fold only exists once the >1920 centred layout leaves white space at its
     left for the crease to fold in from; at 1920 and below col 1 sits flush with the
     viewport edge (the comp's exact design), so no fold */
  @media (max-width: 1920px){
    .howto-step:first-of-type::before{content:none;}
  }
  .howto-step .num{                          /* FB: solid blue, tucked at the left BEHIND the chevron (Figma 160px) */
    /* part of the illustration, so unlike the (fixed) text sizes it scales with
       the fluid step column: comp 160px / 1920 = 8.333vw, reaching the comp's
       full 160px at ≥1920 (where the whole box matches the 1920 design 1:1);
       offsets scale likewise */
    position:absolute;left:max(-30px, -1.5625vw);top:max(-22px, -1.1458vw);z-index:0;
    font-family:var(--font-en);font-weight:300;font-size:min(160px, 8.3333vw);line-height:1;
    color:var(--blue);pointer-events:none;
  }
  .howto-step .fn,.howto-step .step-img,.howto-step .desc{position:relative;z-index:2;}
  .howto-step .fn{
    font-family:var(--font-en);font-weight:500;font-size:calc(20 * var(--u));line-height:calc(30 * var(--u));
    color:var(--blue);margin:0;
  }
  /* FB: larger illustrations — full content width at the Figma 16:9 box (vs height-locked 190),
     capped at the comp's 440px: at 1920 (col 640 − 2×100 padding) the box renders the 1920 design 1:1,
     and past 1920 the columns gain whitespace, not height */
  .howto-step .step-img{display:block;width:min(100%, 440px);height:auto;aspect-ratio:1920 / 1080;object-fit:contain;margin:0;}
  .howto-step .desc{margin:0;max-width:440px;font-size:calc(20 * var(--u));line-height:calc(36 * var(--u));color:var(--ink3);}   /* same cap as the image, so ultra-wide columns keep the 1920 line wrapping */

  /* ============================================================
     Inline CTA band (Figma HowToUse/linkArea) — 2 buttons centred,
     outline left / primary right (reversed vs the SP DOM order).
     ============================================================ */
  .cta-band{
    padding:calc(60 * var(--u)) var(--gut) calc(120 * var(--u));
    display:flex;flex-direction:row-reverse;justify-content:center;gap:calc(24 * var(--u));
  }
  .cta-band .btn{width:calc(411 * var(--u));padding:0;}

  /* ============================================================
     Use case (Figma UseCase 1920×1730)
     ============================================================ */
  .usecase{border-bottom:calc(1 * var(--u)) solid var(--line3);border-top:calc(1 * var(--u)) solid var(--border);}  /* FB: full-width bar at the section top, above the ユースケース eyebrow (same pattern as .howto / .voice) */
  .usecase-concept{padding:calc(120 * var(--u)) var(--gut) 0;display:flex;flex-direction:column;align-items:center;gap:calc(28 * var(--u));}
  .usecase-lead{display:flex;flex-direction:column;align-items:flex-start;gap:calc(20 * var(--u));max-width:min(calc(900 * var(--u)), 100%);text-align:left;}
  .usecase-lead .lead{text-align:left;}
  .usecase-lead .usecase-body{margin-bottom:calc(36 * var(--u));}
  .usecase-lead .usecase-sample-note{text-align:center;align-self:center;margin-bottom:calc(36 * var(--u));}
  .query-card{
    width:min(calc(848 * var(--u)), 100%);position:relative;z-index:1;
    background:rgba(255,255,255,.7);border:calc(1 * var(--u)) solid #fff;border-radius:calc(16 * var(--u));
    padding:calc(24 * var(--u));
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    box-shadow:0 0 calc(36 * var(--u)) rgba(110,164,243,.24);
    display:flex;flex-direction:column;gap:calc(16 * var(--u));
  }
  .query-card .q{margin:0;font-size:calc(20 * var(--u));line-height:calc(28 * var(--u));color:var(--ink3);text-align:center;}
  .query-tags{display:flex;justify-content:space-between;align-items:center;gap:calc(10 * var(--u));}
  .tag{display:inline-flex;align-items:center;gap:calc(6 * var(--u));height:calc(32 * var(--u));padding:0 calc(14 * var(--u));border-radius:calc(40 * var(--u));
    font-family:var(--font-en);font-weight:500;font-size:calc(13 * var(--u));line-height:1;}
  .tag--udr{background:#fff;border:0;color:var(--muted);}
  .tag--udr img{width:calc(16 * var(--u));height:auto;}
  .tag--cat{background:#F2F2F2;color:var(--muted);font-family:var(--font-jp);}
  .uc-connector{display:flex;justify-content:center;margin-top:calc(-18 * var(--u));position:relative;z-index:0;}
  .uc-connector img{width:calc(18 * var(--u));height:calc(90 * var(--u));display:block;}

  .uc-scroll{
    display:flex;justify-content:center;gap:calc(28 * var(--u));
    padding:0 var(--gut) calc(60 * var(--u));
  }
  .uc-card{
    flex:0 1 calc(555 * var(--u));min-width:0;scroll-snap-align:start;background:#fff;   /* shrinkable: the 3 cards compress evenly below ~1330px viewports */
    border:calc(1 * var(--u)) solid var(--line);border-radius:calc(12 * var(--u));overflow:hidden;
  }
  .uc-card .head{padding:calc(48 * var(--u)) calc(44 * var(--u)) 0;}
  .uc-card .case{font-family:var(--font-en);font-weight:500;font-size:calc(16 * var(--u));line-height:calc(24 * var(--u));color:var(--blue);}
  .uc-card .head h3{margin:calc(16 * var(--u)) 0 0;font-family:var(--font-jp);font-weight:600;
    font-size:calc(20 * var(--u));line-height:calc(32 * var(--u));color:var(--ink);
    min-height:calc(64 * var(--u));}  /* baseline; JS raises this to the tallest of the 3 titles (see equalizeUcTitles) */
  .uc-card .body{padding:calc(32 * var(--u)) calc(44 * var(--u)) calc(44 * var(--u));display:flex;flex-direction:column;gap:calc(28 * var(--u));}
  .uc-sample{position:relative;height:calc(418 * var(--u));display:flex;align-items:center;justify-content:center;}
  .uc-sample img{max-height:calc(418 * var(--u));width:auto;border-radius:calc(8 * var(--u));
    box-shadow:0 calc(2 * var(--u)) calc(6 * var(--u)) rgba(15,33,66,.22), 0 calc(7 * var(--u)) calc(9 * var(--u)) calc(-3 * var(--u)) rgba(15,33,66,.30);}
  .preview-btn{
    position:absolute;left:50%;bottom:0;transform:translateX(-50%);
    display:inline-flex;align-items:center;gap:calc(6 * var(--u));height:calc(46 * var(--u));padding:0 calc(20 * var(--u));
    background:#fff;border-radius:calc(52 * var(--u));box-shadow:0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(0,0,0,.12);
    font-family:var(--font-en);font-weight:500;font-size:calc(14 * var(--u));color:var(--blue);
  }
  .preview-btn svg{width:calc(20 * var(--u));height:calc(20 * var(--u));}
  .uc-card .body .btn{width:100%;}

  .usecase .pad{display:flex;justify-content:flex-end;align-items:center;
    padding-top:calc(20 * var(--u))!important;padding-bottom:calc(120 * var(--u))!important;}
  #bulkDownload{width:calc(408 * var(--u));}

  /* Marlin Insights band (Figma "Section Marlin Insight" 1920×594.75, px 100 / pb 120)
     Two equal 844 columns with a 32 gap — copy + button left, banner right. The 100px
     side padding is var(--gut) (== 100 × --u at the 1440 target, and it keeps the band
     on the same content column as every other section below 1440). */
  .mi-band{display:flex;gap:calc(32 * var(--u));align-items:flex-start;justify-content:center;
    padding:0 var(--gut) calc(120 * var(--u));}
  .mi-copy{display:flex;flex-direction:column;gap:calc(16 * var(--u));flex:1 1 0;min-width:0;}
  .mi-title{margin:0;font-family:var(--font-jp);font-weight:600;
    font-size:calc(20 * var(--u));line-height:calc(32 * var(--u));color:var(--ink3);text-align:left;}
  .mi-lead p{margin:0;font-family:var(--font-jp);font-weight:400;
    font-size:calc(20 * var(--u));line-height:calc(36 * var(--u));color:var(--gray600);}
  .mi-banner{flex:1 1 0;min-width:0;order:0;margin-top:0;border-radius:calc(20 * var(--u));overflow:hidden;}
  /* height:auto overrides the img's height attribute, which the 16:9 ratio then supplies */
  .mi-banner img{width:100%;height:auto;aspect-ratio:1696 / 954;object-fit:cover;}
  /* same 409×48 outline button as the Features section's blog link */
  .mi-btn{order:0;margin-top:0;align-self:flex-start;width:calc(409 * var(--u));height:calc(48 * var(--u));}

  /* ============================================================
     Features (Figma Features 1920×1223)
     Centred title; lead (left, 846) + blog button (right, bottom-aligned with the lead); 2 feature cards.
     ============================================================ */
  .features{padding:calc(120 * var(--u)) var(--gut);display:flex;flex-direction:column;align-items:center;gap:calc(48 * var(--u));}
  .features-head{
    display:flex;flex-direction:column;align-items:center;gap:calc(40 * var(--u));width:var(--content);
  }
  .features-head .sec-title{width:100%;align-items:flex-start;text-align:left;}
  /* lead (left, 846 wide) + blog button (right) share one row, bottom-edge aligned via
     align-items:flex-end — no absolute/transform needed for the button's vertical position. */
  .features-row{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%;flex-wrap:wrap;gap:24px;}
  .features-copy{display:flex;flex-direction:column;gap:0;flex:1 1 480px;max-width:calc(846 * var(--u));min-width:0;}
  .features-head .lead{text-align:left;}
  .features-head .btn--white{width:calc(409 * var(--u));height:calc(48 * var(--u));}
  .features-list{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));column-gap:calc(28 * var(--u));justify-content:center;width:var(--content);}
  .feature-card{background:#fff;border:calc(1 * var(--u)) solid var(--border);border-radius:calc(16 * var(--u));
    padding:calc(40 * var(--u));display:flex;flex-direction:column;gap:calc(24 * var(--u));}
  .feature-card .f-head{display:flex;flex-direction:column;gap:calc(10 * var(--u));}
  .feature-card .f-num{font-family:var(--font-en);font-weight:500;font-size:calc(16 * var(--u));line-height:calc(24 * var(--u));color:var(--blue);}
  .feature-card h3{margin:calc(4 * var(--u)) 0 0;font-family:var(--font-jp);font-weight:600;
    font-size:calc(24 * var(--u));line-height:calc(34 * var(--u));color:var(--ink);}
  .badge{align-self:flex-start;background:#F9FAFB;color:var(--blue);border-radius:calc(4 * var(--u));
    padding:calc(6 * var(--u)) calc(10 * var(--u));font-family:var(--font-en);font-weight:500;font-size:calc(14 * var(--u));line-height:calc(20 * var(--u));text-decoration:none;}
  a.badge{transition:background .15s ease;}
  a.badge:hover{background:#EEF3FE;text-decoration:underline;}
  .feature-card .feature-img{display:block;width:100%;height:calc(280 * var(--u));object-fit:contain;}
  .feature-card h4{margin:0 0 calc(6 * var(--u));font-family:var(--font-jp);font-weight:600;
    font-size:calc(18 * var(--u));line-height:calc(26 * var(--u));color:var(--ink);}
  .feature-card p{margin:0;font-size:14px;line-height:23px;color:var(--gray);}

  /* ============================================================
     User voice (Figma UserVoice 1920×1820) — narrow (1138) centred column
     ============================================================ */
  .voice{padding:calc(120 * var(--u)) var(--gut);display:flex;flex-direction:column;align-items:center;gap:calc(48 * var(--u));border-top:calc(1 * var(--u)) solid var(--border);}  /* FB: full-width bar at the section top, above the βテスト利用者の声 eyebrow */
  .voice-list{display:flex;flex-direction:column;gap:calc(36 * var(--u));width:min(calc(1138 * var(--u)), 100%);}
  /* FB: number circle in col 1; title to its right; body/divider/info aligned under
     the title (col 2). 2-col grid over the flat DOM (no markup change). Figma sizes. */
  .voice-card{display:grid;grid-template-columns:calc(246 * var(--u)) 1fr;  /* FB: num(58) + gap(28) + photo(160) = 246, matches 1138px-card spec */
    column-gap:calc(40 * var(--u));align-items:start;
    background:#fff;border:calc(2 * var(--u)) solid #F3F4F6;border-radius:calc(16 * var(--u));
    padding:calc(68 * var(--u)) calc(40 * var(--u));}
  .voice-top{grid-column:1;grid-row:1 / span 2;display:flex;align-items:flex-start;gap:calc(28 * var(--u));}  /* FB: spans the title+body rows so the photo's height is absorbed by that combined height, instead of forcing row 1 (the title) tall and leaving a gap under it */
  .voice-num{display:flex;align-items:center;justify-content:center;width:calc(52 * var(--u));height:calc(52 * var(--u));border-radius:50%;
    border:calc(1 * var(--u)) solid var(--blue);color:var(--blue);font-family:var(--font-en);font-weight:500;font-size:calc(20 * var(--u));}
  .voice-photo{width:calc(160 * var(--u));height:calc(160 * var(--u));border-radius:calc(8 * var(--u));object-fit:cover;flex-shrink:0;}
  .voice-card h3{grid-column:2;grid-row:1;margin:0;font-family:var(--font-jp);font-weight:600;
    font-size:calc(28 * var(--u));line-height:calc(42 * var(--u));color:var(--blue);}
  .voice-card p{grid-column:2;grid-row:2;margin:calc(12 * var(--u)) 0 0;
    font-size:18px;line-height:32px;color:var(--gray600);}
  .voice-card hr{grid-column:2;grid-row:3;width:100%;height:0;border:0;border-top:calc(1 * var(--u)) solid var(--border);margin:calc(20 * var(--u)) 0 0;}
  .voice-info{grid-column:2;grid-row:4;margin:calc(20 * var(--u)) 0 0;font-size:18px;line-height:32px;color:var(--gray600);white-space:pre-line;}

  /* ============================================================
     Pricing (Figma 1920×1234) — 4 plan cards in a row (409 each)
     ============================================================ */
  .pricing{background:#F9FAFB;padding:calc(120 * var(--u)) var(--gut);display:flex;flex-direction:column;align-items:center;gap:calc(60 * var(--u));}
  /* FB: 4 plan cards in one row; align-items:stretch keeps them equal height. */
  .plan-list{display:grid;grid-template-columns:repeat(4, minmax(0, 1fr));width:var(--content);gap:calc(28 * var(--u));justify-content:center;align-items:stretch;}
  .plan-card{background:#fff;border:calc(1 * var(--u)) solid var(--border);border-radius:calc(16 * var(--u));
    padding:calc(40 * var(--u)) calc(28 * var(--u));display:flex;flex-direction:column;gap:calc(24 * var(--u));}
  /* FB: in-card 今すぐはじめる button (same as SP) — full card width, sits between price and the divider */
  .plan-card .btn--black{width:100%;padding:0;}
  .plan-head h3{margin:0 0 calc(8 * var(--u));font-family:var(--font-en);font-weight:500;font-size:calc(22 * var(--u));line-height:calc(28 * var(--u));color:var(--ink);}
  .plan-head h3.fw-600{font-weight:600;}
  /* FB: pin the subtitle to a 2-line height so every card's price row lines up */
  .plan-head p{margin:0;min-height:calc(44 * var(--u));font-size:13px;line-height:20px;color:var(--gray);}
  .plan-price{display:flex;align-items:flex-end;gap:calc(4 * var(--u));font-family:var(--font-en);color:var(--ink);}
  .plan-price .yen{font-weight:500;font-size:calc(26 * var(--u));line-height:1;}
  .plan-price .amt{font-weight:600;font-size:calc(26 * var(--u));line-height:1;}
  .plan-price .unit{font-family:var(--font-jp);font-weight:400;font-size:calc(16 * var(--u));line-height:1;color:var(--gray);}
  .plan-card hr{width:100%;height:0;border:0;border-top:calc(1 * var(--u)) solid var(--line2);margin:0;}
  .check-list{display:flex;flex-direction:column;gap:calc(12 * var(--u));}
  .check-item{display:flex;align-items:flex-start;gap:calc(10 * var(--u));font-size:13px;line-height:20px;color:var(--gray);}
  .check-item::before{
    content:"";flex:none;width:calc(20 * var(--u));height:calc(20 * var(--u));margin-top:calc(2 * var(--u));border-radius:50%;background:var(--check-bg);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none'%3E%3Cpath d='M1 4.2l2.6 2.6L9 1' stroke='%236EA4F3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:center;background-size:calc(11 * var(--u)) calc(9 * var(--u));
  }

  /* ============================================================
     FAQ (Figma 1920×1406) — centred eyebrow, 1138 list
     ============================================================ */
  .faq{padding:calc(120 * var(--u)) var(--gut);display:flex;flex-direction:column;align-items:center;gap:calc(40 * var(--u));}
  .faq .eyebrow{width:min(calc(1138 * var(--u)), 100%);text-align:left;}  /* FB: same width as .faq-list below it (which stays centered via .faq's align-items:center), text left-aligned within that box so it lines up with the box's left edge */
  .faq-list{border:calc(1 * var(--u)) solid #F3F4F6;border-radius:calc(12 * var(--u));background:#fff;overflow:hidden;width:min(calc(1138 * var(--u)), 100%);}
  .faq-item{border-bottom:calc(1 * var(--u)) solid var(--border);background:transparent;}  /* FB: 2px divider read too dark/doubled — single 1px #E5E7EB hairline like the other dividers */
  .faq-item:last-child{border-bottom:0;}
  .faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:calc(16 * var(--u));padding:calc(28 * var(--u)) calc(32 * var(--u));}
  .faq-item summary::-webkit-details-marker{display:none;}
  .faq-q{flex:none;width:calc(40 * var(--u));text-align:left;font-family:var(--font-pt);font-weight:700;font-size:14px;line-height:23px;color:var(--blue);}
  .faq-title{flex:1;font-family:var(--font-jp);font-weight:600;font-size:14px;line-height:23px;color:var(--ink);}
  .faq-toggle{position:relative;flex:none;width:calc(20 * var(--u));height:calc(20 * var(--u));margin-top:calc(3 * var(--u));}
  .faq-toggle::before,.faq-toggle::after{content:"";position:absolute;left:50%;top:50%;background:var(--blue);transform:translate(-50%,-50%);}
  .faq-toggle::before{width:calc(12 * var(--u));height:calc(2 * var(--u));}
  .faq-toggle::after{width:calc(2 * var(--u));height:calc(12 * var(--u));transition:opacity .2s;}
  .faq-item[open] .faq-toggle::after{opacity:0;}
  .faq-answer{padding:0 calc(32 * var(--u)) calc(28 * var(--u)) calc(88 * var(--u));font-size:14px;line-height:23px;color:var(--gray);}

  /* ============================================================
     Big CTA (Figma CTA 1920×762)
     ============================================================ */
  .cta{
    position:relative;overflow:hidden;background:#F9FAFB;
    padding:calc(160 * var(--u)) var(--gut) calc(200 * var(--u));
    display:flex;flex-direction:column;align-items:center;gap:calc(40 * var(--u));
    /* FB: extend the gray band's bottom so the ghost wordmark sits right at the
       bottom of "Sakana" (its baseline ≈810u down; ghost is top-anchored at 534u
       + line-height 318u). min-height keeps this independent of the heading's
       line count, so it holds on both JA (2-line) and EN (1-line). */
    min-height:calc(762 * var(--u));
  }
  /* Figma "illust" group 180:3187 = opacity .30 + multiply, masked by gradient 180:3184
     (fish fade out over the bottom 25% of the 762-tall CTA frame). Per-layer opacity .3
     is equivalent since the two rects don't overlap.
     superseded for now by .flock-bg (the p5 boids canvas) — kept here, disabled, in
     case we want the static fish layers back alongside/instead of it later.
  .cta::before{                            // Figma rect 52:18263 — right fish school (STRETCH fill, x1289 y-239, 736×1274)
    content:"";position:absolute;left:calc(1289 * var(--u));top:calc(-239 * var(--u));width:calc(736 * var(--u));height:calc(1274 * var(--u));z-index:0;
    background:url(/assets/marlin/cta-fish-pc.png) center/100% 100% no-repeat;
    opacity:.3;mix-blend-mode:multiply;pointer-events:none;
    -webkit-mask:linear-gradient(to bottom,#000 63.6%,transparent 78.6%);
    mask:linear-gradient(to bottom,#000 63.6%,transparent 78.6%);
  }
  .cta::after{                             // Figma rect 52:18268 — left fish cluster (STRETCH fill, x17 y-224, 644×974)
    content:"";position:absolute;left:calc(17 * var(--u));top:calc(-224 * var(--u));width:calc(644 * var(--u));height:calc(974 * var(--u));z-index:0;
    background:url(/assets/marlin/cta-fish-pc-2.png) center/100% 100% no-repeat;
    opacity:.3;mix-blend-mode:multiply;pointer-events:none;
    -webkit-mask:linear-gradient(to bottom,#000 81.7%,transparent 100%);
    mask:linear-gradient(to bottom,#000 81.7%,transparent 100%);
  }
  */
  .cta h2{
    position:relative;z-index:1;margin:0;text-align:center;color:var(--ink2);
    font-family:var(--font-jp);font-weight:600;font-size:calc(60 * var(--u));line-height:calc(90 * var(--u));   /* Figma CTA heading 52:18270 = 60/90 W6 */
  }
  /* Figma button order: outline (無料トライアル申請) left, primary (今すぐはじめる) right — reverse of the DOM */
  .cta-btns{position:relative;z-index:1;display:flex;flex-direction:row-reverse;gap:calc(24 * var(--u));}
  .cta .btn{width:calc(411 * var(--u));}
  .cta-inquiry{
    display:block;position:relative;z-index:1;
    text-align:center;white-space:nowrap;
    font-size:14px;font-weight:600;color:#000;
  }
  .cta-inquiry a{color:#000;text-decoration:underline;text-underline-offset:3px;}
  .cta-ghost{
    /* Figma 52:18272: Poppins 500, size 212 / line-height 318, y534, color #E5E7EB @ opacity 1 —
       now an endless horizontal marquee rather than a single static line. */
    position:absolute;left:0;top:calc(534 * var(--u));z-index:0;width:100%;
    display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;
    overflow:hidden;pointer-events:none;
  }
  .cta-ghost span{
    display:block;width:auto;flex-shrink:0;white-space:nowrap;padding-right:.6em;
    font-family:var(--font-en);font-weight:500;font-size:calc(212 * var(--u));line-height:calc(318 * var(--u));
    color:var(--border);
  }
  .cta-ghost span:nth-child(odd){animation:ctaGhostMove1 72s linear -36s infinite;}
  .cta-ghost span:nth-child(2n){animation:ctaGhostMove2 72s linear infinite;}

  /* ============================================================
     Footer (Figma footer 1920×480) — logo+copyright left, links right
     ============================================================ */
  /* FB: logo sits directly ABOVE the copyright (not floating mid-footer). A top
     spacer row pushes the logo+copyright pair to the bottom; links stay top-aligned. */
  .footer{
    background:#fff;
    display:grid;grid-template-columns:1fr calc(408 * var(--u));
    grid-template-rows:1fr auto auto;
    align-items:end;
    padding:calc(80 * var(--u)) var(--gut) calc(80 * var(--u));
    column-gap:calc(40 * var(--u));
  }
  .footer-logo{grid-column:1;grid-row:2;display:flex;justify-content:flex-start;align-items:flex-end;}
  .footer-logo img{height:calc(90 * var(--u));width:auto;}
  .copyright{grid-column:1;grid-row:3;padding:calc(16 * var(--u)) 0 0 calc(26 * var(--u));
    font-family:var(--font-en);font-weight:400;font-size:13px;line-height:23px;color:var(--gray);}
  .footer-links{grid-column:2;grid-row:1 / -1;align-self:start;display:flex;flex-direction:column;padding:0;}
  .foot-link{
    display:flex;align-items:center;justify-content:space-between;
    height:calc(80 * var(--u));padding:0 calc(8 * var(--u));border-bottom:calc(1 * var(--u)) solid var(--line2);
    font-family:var(--font-jp);font-weight:400;font-size:14px;color:var(--ink2);
  }
  .foot-link:first-child{border-top:calc(1 * var(--u)) solid var(--line2);}
  .foot-link::after{
    content:"";width:calc(8 * var(--u));height:calc(8 * var(--u));
    border-top:calc(1.5 * var(--u)) solid var(--gray);border-right:calc(1.5 * var(--u)) solid var(--gray);
    transform:rotate(45deg);
  }

  /* ============================================================
     Hover / interaction states (PC, pointer)
     Every clickable text + component gets a hover affordance.
     Resting styles are untouched (layout / pixel-diff unchanged),
     except the X / LinkedIn icons, which adopt the Sakana AI home
     spec: gray (#9a9a9a) at rest → ink (#0D0D0D) on hover.
     Buttons (.btn) and the language dropdown options already carry
     their own :hover above and are intentionally left as-is.
     ============================================================ */
  /* header logo */
  .hd-logo{transition:opacity .15s;}
  .hd-logo:hover{opacity:.7;}

  /* burger icon + drawer close (X) — subtle fade */
  .burger,.pc-drawer .menu-close{transition:opacity .15s;}
  .burger:hover,.pc-drawer .menu-close:hover{opacity:.7;}

  /* in-bar nav links: muted → blue (same blue the scroll-spy uses for the active item) */
  .menu-overlay .menu-link{transition:color .15s;}
  .menu-overlay .menu-link:hover{color:var(--blue);}

  /* language pill: chip-tint on hover (matches the dropdown option hover) */
  .menu-lang .lang-current{transition:background .15s,border-color .15s;}
  .menu-lang .lang-current:hover{background:var(--chip);border-color:#D8DEE8;}

  /* preview pill: faint blue wash + a touch more lift */
  .preview-btn{transition:background .15s,box-shadow .15s;}
  .preview-btn:hover{background:var(--chip);
    box-shadow:0 calc(4 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.16);}

  /* FAQ rows: faint blue wash + blue question title */
  .faq-item summary,.faq-item .faq-title{transition:background .15s,color .15s;}
  .faq-item summary:hover{background:var(--bg-blue);}
  .faq-item summary:hover .faq-title{color:var(--blue);}

  /* footer links: ink → blue; the chevron follows and nudges right */
  .foot-link{transition:color .15s;}
  .foot-link::after{transition:border-color .15s,transform .15s;}
  .foot-link:hover{color:var(--blue);}
  .foot-link:hover::after{border-color:var(--blue);transform:translateX(calc(3 * var(--u))) rotate(45deg);}

  /* burger drawer: nav links + Other Products → blue */
  .pc-drawer .menu-link{transition:color .15s;}
  .pc-drawer .menu-link:hover{color:var(--blue);}
  /* burger drawer: JA / EN language toggle → blue */
  .pc-drawer .menu-lang a[data-lang]{transition:color .15s;}
  .pc-drawer .menu-lang a[data-lang]:hover{color:var(--blue);}

  /* X / LinkedIn icons — Sakana AI home spec (gray at rest → ink on hover) */
  .pc-drawer .menu-social svg path{fill:currentColor;}
  .pc-drawer .menu-social a{color:#9a9a9a;transition:color .15s;}
  .pc-drawer .menu-social a:hover{color:#0D0D0D;}
  .pc-drawer .menu-social a[aria-label="LinkedIn"]:hover{color:#2867B2;}   /* LinkedIn brand blue, instead of the generic ink hover */

  /* ============================================================
     i18n — JA default; html.lang-en shows EN
     ============================================================ */
  .t-en{display:none;}
  html.lang-en .t-ja{display:none;}
  html.lang-en .t-en{display:revert;}
  .plan-price .t-ja{display:contents;}
  .plan-price .t-en{display:none;}
  html.lang-en .plan-price .t-ja{display:none;}
  html.lang-en .plan-price .t-en{display:contents;}
}

/* ===== PC narrow (1024–1279px) ===== */
@media (min-width: 1024px) and (max-width: 1279.98px){
  /* 4 plan cards get too cramped in one row — 2×2 */
  .plan-list{grid-template-columns:repeat(2, minmax(0, 1fr));width:min(636px, 100%);}
  /* header: the right-aligned nav would run into the tagline — drop it and tighten the nav gaps */
  .hd-logo::after{content:none;}
  .menu-overlay .menu-scroll{gap:clamp(20px, 2vw, 29.25px);}
}