/* ============================================================
   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: 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 */

/* ===== 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;
  }
  .btn:hover{opacity:.9;}
  .btn--primary{background:var(--blue);color:#fff;}
  .btn--outline{background:#fff;color:var(--blue);border-color:var(--blue);}
  .btn--white{background:#fff;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%;
  }

  .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:var(--blue);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;}
  .menu-scroll>.menu-group:first-child{border-bottom:1px solid var(--border);}  /* Figma: divider under the login button */
  .menu-label{margin:0 0 8px;font-family:var(--font-en);font-weight:500;font-size:12px;line-height:18px;color:var(--gray);}
  .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-link i{color:var(--muted);}             /* chevron hugs each label, not pinned to the far right */
  .menu-link--plain{gap:0;}                      /* Other Products links: no chevron */
  .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 (JA mirrors EN: natural reflow, breaks only between paragraphs) */
  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;background:var(--blue100);overflow:hidden;
  }
  .product-band img{width:100%;height:100%;object-fit:cover;}

  .point-list{padding:28px 24px;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;}
  .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;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;}
  .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 8px;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;}

  /* ============================================================
     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;}
  .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;}
  .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:flex-start;align-items:flex-start;gap:8px;}
  .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 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;
  }
  .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;   /* hero-fish.png is ~30% alpha -> effective ~.16 */
  }
  .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-fish-2.png is opaque -> match the lighter ::before */
  }
  .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-ghost{                                     /* giant faint wordmark peeking up from the bottom edge */
    position:absolute;left:-9px;bottom:0;z-index:0;
    font-family:var(--font-en);font-weight:500;font-size:60px;line-height:1;
    color:var(--border);white-space:nowrap;pointer-events:none;
    transform:translateY(12%);                    /* Figma: sits higher, only its lower edge is clipped */
  }

  /* ============================================================
     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.

     Scaling 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 tracks the viewport (0.0520834vw == 1920px → 100vw) and is capped at
     1px so the layout is 1:1 at ≥1920, 0.75× at 1440 (the target viewport),
     and degrades faithfully down to the 1024px breakpoint. This keeps the
     whole page a proportional render of the comp at any desktop width, which
     is also what makes the pixel-diff width-independent.
     ============================================================ */

  :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:min(1px, 0.0520834vw);     /* 1 design px (1920px comp → 100vw, capped 1:1 at ≥1920) */
    --gut:calc(100 * var(--u));     /* page side gutter */
    --content:calc(1720 * var(--u));/* 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:calc(20 * var(--u));line-height:calc(36 * var(--u));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;
    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--white{background:#fff;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:var(--blue);border-radius:calc(2 * var(--u));transition:.25s;}   /* SP-matched blue 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 */
  .menu-link .chev-d,.menu-link i{display:none;}
  /* scroll-spy: JS adds .is-active to the link whose section is in view; blue text
     + 2px blue underline at the bar bottom slides between items as the page scrolls. */
  .menu-link.is-active{color:var(--blue);}
  .menu-link.is-active::after{
    /* 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. */
    content:"";position:absolute;left:calc(-20 * var(--u));right:calc(-20 * var(--u));bottom:calc(-52 * var(--u));
    height:calc(2 * var(--u));background:var(--blue);
  }
  .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(8 * 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(10 * var(--u));height:calc(10 * 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: blue pill */
  }
  .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;}
  .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));
    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:var(--blue);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:#fff;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;}
  .pc-drawer .menu-group:first-child{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-link.is-active::after{display:none;}
  .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{position:relative;height:calc(820 * var(--u));background:#fff;overflow:hidden;}
  .hero::before{                          /* fish school — Figma KV rect 52:18131, exported SVG (rotated −45.71°, opacity .3 + multiply baked in). viewBox 1157×820 == hero right region x763→1920 */
    content:"";position:absolute;left:calc(763 * var(--u));top:0;right:auto;
    width:calc(1157 * 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;   /* opacity is baked into the SVG (g opacity=0.3) */
  }
  .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(443 * var(--u));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;   /* opacity baked into the SVG (g opacity=0.3) */
  }
  .hero-copy,.hero-lead,.hero-mock-wrap,.hero-cta{position:relative;z-index:1;}
  .hero-copy{position:absolute;left:var(--gut);top:calc(244 * var(--u));width:calc(560 * var(--u));}
  .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;}
  .hero-copy h1 span:not(:first-child)::before{content:" ";}  /* restore spaces lost by the SP column markup */
  .hero-lead{
    position:absolute;left:var(--gut);top:calc(407 * var(--u));width:calc(557 * var(--u));margin:0;
    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{position:absolute;left:calc(830 * var(--u));top:calc(125 * var(--u));
    width:calc(990 * var(--u));height:calc(571 * var(--u));}
  .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{position:absolute;left:var(--gut);top:calc(503 * var(--u));width:calc(557 * var(--u));
    display:flex;flex-direction:row-reverse;gap:calc(24 * var(--u));}   /* FB: 無料トライアル申請 left, 今すぐはじめる right */
  .hero-cta .btn{flex:1;padding:0;}

  /* vertical scroll hint on the left edge */
  .scroll-hint{
    position:absolute;left: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 */
  }

  /* 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:calc(555 * var(--u)) calc(1137 * var(--u));
    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 left-aligned 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:calc(860 * var(--u));max-width:100%;margin-inline:auto;}
  .about-lead .lead{
    font-family:var(--font-jp);font-weight:400;
    font-size:calc(20 * var(--u));line-height:calc(38 * var(--u));   /* 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:calc(555 * var(--u));height:calc(740 * var(--u));
    border-radius:calc(16 * var(--u));overflow:hidden;background:var(--blue100);
    background-image:url(/assets/marlin/about-product-pc.png);
    background-size:cover;background-position:center;
  }
  .product-band img{display:none;}

  .point-list{grid-column:2;display:flex;flex-direction:column;gap:calc(24 * var(--u));}
  .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:calc(20 * var(--u));line-height:calc(30 * var(--u));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:calc(20 * var(--u));line-height:calc(36 * var(--u));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(40 * var(--u));
    display:flex;flex-direction:column;align-items:center;gap:calc(16 * var(--u));}
  .howto-steps{display:grid;grid-template-columns:repeat(3, calc(640 * var(--u)));justify-content:center;
    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:calc(100 * var(--u));                                /* Figma: p-100 all sides */
    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:nth-of-type(n+2)::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));
  }
  .howto-step .num{                          /* FB: solid blue, tucked at the left BEHIND the chevron (Figma 160px) */
    position:absolute;left:calc(-30 * var(--u));top:calc(-22 * var(--u));z-index:0;
    font-family:var(--font-en);font-weight:300;font-size:calc(160 * var(--u));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) */
  .howto-step .step-img{display:block;width:100%;height:auto;aspect-ratio:1920 / 1080;object-fit:contain;margin:0;}
  .howto-step .desc{margin:0;font-size:calc(20 * var(--u));line-height:calc(36 * var(--u));color:var(--ink3);}

  /* ============================================================
     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);
    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);}
  .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:center;gap:calc(20 * var(--u));max-width:calc(900 * var(--u));text-align:center;}
  .usecase-lead .lead{text-align:center;}
  .query-card{
    width:calc(848 * var(--u));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(18 * var(--u));line-height:calc(28 * var(--u));color:var(--ink3);text-align:left;}
  .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:calc(40 * var(--u)) var(--gut) calc(8 * var(--u));
  }
  .uc-card{
    flex:0 0 calc(555 * var(--u));scroll-snap-align:start;background:#fff;
    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(60 * var(--u))!important;}
  #bulkDownload{width:calc(408 * var(--u));}

  /* ============================================================
     Features (Figma Features 1920×1223)
     Centred title; lead (left, 846) + blog button (right); 2 feature cards.
     ============================================================ */
  .features{padding:calc(120 * var(--u)) var(--gut);display:flex;flex-direction:column;align-items:center;gap:calc(48 * var(--u));}
  /* FB: body text centred across the full width; the blog button moved to its own
     row below — it no longer shares the lead's grid row, which had shoved the lead left. */
  .features-head{
    display:flex;flex-direction:column;align-items:center;gap:calc(40 * var(--u));width:var(--content);
  }
  .features-head .sec-title{width:100%;}
  .features-head .lead{text-align:center;max-width:calc(846 * var(--u));}
  .features-head .btn--outline{width:calc(409 * var(--u));height:calc(48 * var(--u));align-self:flex-end;}   /* FB: blog button right-aligned */
  .features-list{display:grid;grid-template-columns:repeat(2, calc(846 * var(--u)));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:calc(15 * var(--u));line-height:calc(26 * var(--u));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:calc(1138 * var(--u));}
  /* 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(58 * var(--u)) 1fr;
    column-gap:calc(28 * 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(60 * var(--u));}
  .voice-top{grid-column:1;grid-row:1;display:flex;align-items:flex-start;}
  .voice-num{display:flex;align-items:center;justify-content:center;width:calc(58 * var(--u));height:calc(58 * 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-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:calc(20 * var(--u));line-height:calc(36 * var(--u));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:calc(20 * var(--u));line-height:calc(36 * var(--u));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(48 * 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, calc(409 * var(--u)));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--primary{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);}
  /* 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:calc(14 * var(--u));line-height:calc(22 * var(--u));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:calc(14 * var(--u));line-height:calc(22 * var(--u));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{text-align:center;}
  .faq-list{border:calc(1 * var(--u)) solid #F3F4F6;border-radius:calc(12 * var(--u));background:#fff;overflow:hidden;width:calc(1138 * var(--u));}
  .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:calc(16 * var(--u));line-height:calc(26 * var(--u));color:var(--blue);}
  .faq-title{flex:1;font-family:var(--font-jp);font-weight:600;font-size:calc(16 * var(--u));line-height:calc(26 * var(--u));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:calc(15 * var(--u));line-height:calc(26 * var(--u));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. */
  .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;   /* white bg → identity on #F9FAFB; gray fish lines darken */
    -webkit-mask:linear-gradient(to bottom,#000 63.6%,transparent 78.6%);
    mask:linear-gradient(to bottom,#000 63.6%,transparent 78.6%);   /* CTA bottom-fade (0.75→1.0) mapped into this 1274-tall box */
  }
  .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-ghost{
    /* FB: ghost wordmark starts further left (Figma x-220) so "Sakana Marlin, Your"
       reads from the left edge — not the centred middle of the phrase. */
    /* Figma 52:18272: Poppins 500, size 212 / line-height 318, x-220 y534, color #E5E7EB @ opacity 1 */
    position:absolute;left:calc(-220 * var(--u));top:calc(534 * var(--u));z-index:0;
    font-family:var(--font-en);font-weight:500;font-size:calc(212 * var(--u));line-height:calc(318 * var(--u));
    color:var(--border);white-space:nowrap;pointer-events:none;
  }

  /* ============================================================
     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:calc(14 * var(--u));line-height:calc(26 * var(--u));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:calc(16 * var(--u));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;}

  /* ============================================================
     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;}
}