/* ══════════════════════════════════════════════════════
   DESIGN SYSTEM v4
══════════════════════════════════════════════════════ */
:root {
  --ink:    #0A0D14;
  --ink-72: #293347;
  --ink-52: #4F6070;
  --ink-32: #8799AC;
  --ink-16: #C4CDD8;
  --ink-08: #E4EAF0;
  --ink-04: #F2F4F7;
  --paper:  #F5F7FA;
  --white:  #FFFFFF;

  /*
   * ━━ BRAND ACCENT ━━
   * Change ONLY this block to re-theme the entire LP.
   * --A    = primary (buttons, links, active states)
   * --Ah   = primary hover / pressed
   * --Abg  = tinted background (badges, tags)
   * --Adk  = lighter variant for dark surfaces
   * --Argb = raw RGB triplet for rgba() usage
   * --Adkrgb = raw RGB triplet for dark-surface rgba()
   * --Ahero      = hero background
   * --AheroGrad  = hero diagonal gradient overlay
   */
  --A:    #2563EB;
  --Ah:   #1D4ED8;
  --Abg:  #EFF6FF;
  --Adk:  #60A5FA;
  --Argb:   37,99,235;
  --Adkrgb: 96,165,250;
  --Ahero:      #1746A2;
  --AheroGrad:  linear-gradient(135deg, #1746A2 0%, #2563EB 40%, #3B82F6 70%, #60A5FA 100%);

  /* Dark */
  --D:    #080B11;
  --D2:   #0D1219;
  --D3:   #131B28;
  --Dbd:  #1C2B3E;
  --Dbd2: #273C54;

  /* Semantic */
  --green:   #155D31;
  --greenbg: #D9F9E7;
  --blue:    #1D4ED8;
  --bluebg:  #EFF6FF;
  --red:     #DC2626;

  /* Type */
  --F: 'Noto Sans JP', sans-serif;
  --M: 'JetBrains Mono', monospace;

  /* Scale */
  --t10:10px;--t11:11px;--t12:12px;--t13:13px;
  --t15:15px;--t16:16px;--t17:17px;--t20:20px;
  --t22:22px;--t24:24px;--t28:28px;--t32:32px;
  --t40:40px;--t48:48px;

  /* Space: 8px grid */
  --sp2:2px; --sp4:4px; --sp6:6px; --sp8:8px;
  --sp10:10px;--sp12:12px;--sp14:14px;--sp16:16px;
  --sp18:18px;--sp20:20px;--sp24:24px;--sp28:28px;
  --sp32:32px;--sp36:36px;--sp40:40px;--sp48:48px;
  --sp56:56px;--sp64:64px;--sp80:80px;--sp96:96px;
  --sp120:120px;--sp140:140px;

  --r2:2px;--r4:4px;--r6:6px;--r8:8px;--r10:10px;--r12:12px;

  --sh0:0 1px 3px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04);
  --sh1:0 4px 16px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.05);
  --sh2:0 12px 40px rgba(0,0,0,.11),0 4px 14px rgba(0,0,0,.06);
  --sh3:0 24px 64px rgba(0,0,0,.14),0 6px 20px rgba(0,0,0,.07);
  --shD:0 32px 80px rgba(0,0,0,.52),0 0 0 1px rgba(255,255,255,.05);

  --max:1200px;
  --navH:68px;
  --calH:64px; /* height per calendar hour */
}

/* ══ RESET ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  font-family:var(--F);font-size:var(--t15);line-height:1.72;
  color:var(--ink);background:var(--white);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  font-feature-settings:"palt" 1;
}
h1,h2,h3,h4,p,li,span,a,button,label,select,option,blockquote{font-feature-settings:"palt" 1}
/* Japanese text: prevent mid-word breaks globally */
body{word-break:keep-all;overflow-wrap:break-word;line-break:strict;overflow-x:hidden}
h1,h2,h3,h4{overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:var(--F);border:none;background:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--A);outline-offset:3px;border-radius:var(--r2)}

.skip{
  position:absolute;top:-80px;left:var(--sp24);z-index:9999;
  padding:var(--sp8) var(--sp16);background:var(--A);color:#fff;
  font-size:var(--t13);font-weight:700;border-radius:var(--r4);transition:top .1s;
}
.skip:focus{top:var(--sp8)}

/* ══ LAYOUT ══ */
.W{max-width:var(--max);margin:0 auto;padding:0 var(--sp24)}
@media(min-width:1040px){.W{padding:0 var(--sp40)}}
.S{padding:var(--sp120) 0}
@media(max-width:768px){.S{padding:var(--sp80) 0}}
@media(max-width:480px){.S{padding:var(--sp64) 0}}

/* ══ EYEBROW ══ */
.EB{
  display:inline-flex;align-items:center;gap:var(--sp10);
  font-family:var(--M);font-size:var(--t11);font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--A);
  margin-bottom:var(--sp20);
}
.EB::before{content:'';display:block;width:16px;height:1px;background:currentColor;flex-shrink:0}
.EB--dk{color:var(--Adk)}
.EB--dk::before{background:var(--Adk);opacity:.5}

/* ══ SECTION HEADING ══ */
.SH{
  font-size:clamp(var(--t28),3.5vw,var(--t48));
  font-weight:700;line-height:1.18;letter-spacing:.018em;color:var(--ink);
}
.SH--w{color:var(--white)}

/* ══ BUTTONS ══ */
.Btn{
  display:inline-flex;align-items:center;gap:var(--sp8);
  font-family:var(--F);font-size:var(--t15);font-weight:700;
  letter-spacing:.025em;padding:0 var(--sp28);min-height:52px;
  border-radius:var(--r4);border:1.5px solid transparent;
  white-space:nowrap;cursor:pointer;text-decoration:none;
  transition:background-color .13s,border-color .13s,color .13s,transform .08s;
}
.Btn:active{transform:translateY(1px)}
.Btn svg{flex-shrink:0;transition:transform .13s}
.Btn:hover svg.arrow{transform:translateX(3px)}
.Btn-A{background:var(--A);color:#fff;border-color:var(--A)}
.Btn-A:hover{background:var(--Ah);border-color:var(--Ah)}
.Btn-OD{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.Btn-OD:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.Btn-W{background:var(--white);color:var(--A);border-color:var(--white)}
.Btn-W:hover{background:#F0F4FF;border-color:#F0F4FF}

/* ══ BOOKING UI ══ */
.UL{display:block;font-family:var(--M);font-size:var(--t10);font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-32);margin-bottom:var(--sp8)}
.DRow{display:flex;gap:var(--sp8);margin-bottom:var(--sp16)}
.DC{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:10px var(--sp8);border:1.5px solid var(--ink-16);border-radius:var(--r6);font-size:var(--t13);font-weight:500;color:var(--ink-52);cursor:pointer;min-height:56px;transition:border-color .12s,background .12s,color .12s}
.DC-d{font-size:var(--t10);color:var(--ink-32);line-height:1}
.DC.is-on{border-color:var(--A);background:var(--Abg);color:var(--Ah)}
.DC.is-on .DC-d{color:var(--A)}
.TGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp6);margin-bottom:var(--sp20)}
.TC{display:flex;align-items:center;justify-content:center;padding:10px var(--sp4);min-height:44px;border:1.5px solid var(--ink-16);border-radius:var(--r4);font-family:var(--M);font-size:var(--t12);font-weight:500;color:var(--ink-52);cursor:pointer;transition:border-color .12s,background .12s,color .12s}
.TC.is-on{border-color:var(--A);background:var(--A);color:#fff}
.BookBtn{display:block;width:100%;padding:15px;background:var(--A);color:#fff;font-family:var(--F);font-size:var(--t15);font-weight:700;letter-spacing:.025em;text-align:center;border-radius:var(--r4);border:none;cursor:pointer;transition:background .13s}
.BookBtn:hover{background:var(--Ah)}

/* ══ BROWSER CHROME ══ */
.BW{border-radius:var(--r12);overflow:hidden;border:1px solid var(--ink-08)}
.BWbar{display:flex;align-items:center;gap:var(--sp12);padding:var(--sp12) var(--sp16)}
.BWbar--D{background:#192030;border-bottom:1px solid var(--Dbd)}
.BWbar--L{background:#EDEAE7;border-bottom:1px solid var(--ink-08)}
.BWdots{display:flex;gap:6px;flex-shrink:0}
.BWdot{width:10px;height:10px;border-radius:50%;display:block}
.r{background:#FF5F57}.y{background:#FEBC2E}.g{background:#28C840}
.BWurl{flex:1;text-align:center;font-family:var(--M);font-size:var(--t11);padding:4px var(--sp12);border-radius:var(--r4)}
.BWurl--D{color:rgba(255,255,255,.28);background:rgba(255,255,255,.05)}
.BWurl--L{color:var(--ink-32);background:rgba(0,0,0,.05)}

/* ══ FADE-IN ══ */
@media(prefers-reduced-motion:no-preference){
  .fi{opacity:0;transform:translateY(12px);transition:opacity .58s cubic-bezier(.4,0,.2,1),transform .58s cubic-bezier(.4,0,.2,1)}
  .fi.in{opacity:1;transform:none}
  .d1{transition-delay:.09s}.d2{transition-delay:.18s}
  .d3{transition-delay:.27s}.d4{transition-delay:.36s}
}
@media(prefers-reduced-motion:reduce){.fi{opacity:1;transform:none}}

/* ══════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════ */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;transition:background .24s,border-color .24s;border-bottom:1px solid transparent}
#nav.on{background:rgba(255,255,255,.95);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-color:var(--ink-08)}
/* Subpage nav: static, always white, no blur needed */
#nav.nav--sub{position:relative;background:var(--white);border-color:var(--ink-08);backdrop-filter:none}
.NW{display:flex;align-items:center;justify-content:space-between;height:var(--navH)}
.Logo{display:inline-flex;align-items:baseline;font-size:20px;font-weight:700;letter-spacing:-.01em;color:rgba(255,255,255,.94);transition:color .24s;gap:var(--sp6)}
.Logo-ai{font-family:var(--M);font-size:13px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.7);background:rgba(255,255,255,.12);padding:2px 8px;border-radius:var(--r4);transition:color .24s,background .24s}
#nav.on .Logo{color:var(--ink)}
#nav.on .Logo-ai{color:var(--A);background:var(--Abg)}
.NLinks{display:flex;align-items:center;gap:var(--sp40)}
.NLinks a{font-size:var(--t13);font-weight:500;color:rgba(255,255,255,.85);transition:color .13s;padding:var(--sp4) 0;position:relative}
.NLinks a::after{content:'';position:absolute;bottom:-2px;left:0;right:100%;height:1px;background:#fff;transition:right .2s cubic-bezier(.4,0,.2,1)}
.NLinks a:hover{color:#fff}
.NLinks a:hover::after{right:0}
#nav.on .NLinks a{color:var(--ink-52)}
#nav.on .NLinks a:hover{color:var(--ink)}
#nav.on .NLinks a::after{background:var(--A)}
.NCta{font-size:var(--t13);font-weight:700;padding:0 var(--sp20);min-height:38px;display:inline-flex;align-items:center;background:var(--A);color:#fff;border-radius:var(--r4);letter-spacing:.025em;transition:background .13s}
.NCta:hover{background:var(--Ah)}
.Burger{display:none;flex-direction:column;gap:5px;padding:var(--sp8);margin-right:calc(-1*var(--sp8));cursor:pointer}
.BL{display:block;width:22px;height:1.5px;background:rgba(255,255,255,.88);border-radius:2px;transform-origin:center;transition:background .24s,transform .22s,opacity .22s}
#nav.on .BL{background:var(--ink)}
.Burger.open .BL:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.Burger.open .BL:nth-child(2){opacity:0;transform:scaleX(0)}
.Burger.open .BL:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.Drawer{position:fixed;top:0;right:-100%;bottom:0;width:min(320px,90vw);background:var(--white);z-index:200;padding:76px var(--sp32) var(--sp40);display:flex;flex-direction:column;transition:right .3s cubic-bezier(.4,0,.2,1);box-shadow:-6px 0 40px rgba(0,0,0,.1)}
.Drawer.open{right:0}
.DClose{position:absolute;top:var(--sp20);right:var(--sp20);width:40px;height:40px;display:flex;align-items:center;justify-content:center;color:var(--ink-32);transition:color .13s}
.DClose:hover{color:var(--ink)}
.Drawer a{font-size:var(--t17);font-weight:500;color:var(--ink-72);padding:var(--sp16) 0;border-bottom:1px solid var(--ink-04);transition:color .13s}
.Drawer a:hover{color:var(--A)}
.Scrim{position:fixed;inset:0;background:rgba(0,0,0,.44);z-index:190;opacity:0;pointer-events:none;transition:opacity .3s}
.Scrim.open{opacity:1;pointer-events:all}
@media(max-width:860px){.NLinks,.NCta{display:none}.Burger{display:flex}}

/* ══════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════ */
#hero{background:var(--Ahero);min-height:100dvh;display:flex;align-items:center;padding:var(--sp140) 0 var(--sp96);position:relative;overflow:hidden}
#hero::before{content:'';position:absolute;inset:0;pointer-events:none;background:var(--AheroGrad);opacity:.55}
#hero::after{content:'';position:absolute;top:-20%;right:-10%;width:70%;height:140%;background:radial-gradient(ellipse at 70% 30%,rgba(255,255,255,.1) 0%,transparent 60%);pointer-events:none}
/* Hero particle canvas */
.hero-particles{position:absolute;inset:0;z-index:0;pointer-events:none}
/* Hero floating shapes */
.hero-shape{position:absolute;pointer-events:none;z-index:0}
.hero-shape--ring{
  border-radius:50%;
  border:2px solid rgba(255,255,255,.1);
  animation:hFloat 8s ease-in-out infinite;
}
.hero-shape--dot{
  border-radius:50%;
  background:rgba(255,255,255,.08);
  animation:hFloat 6s ease-in-out infinite;
}
.hero-shape--cross{
  width:20px;height:20px;position:absolute;
  animation:hSpin 12s linear infinite;
}
.hero-shape--cross::before,.hero-shape--cross::after{
  content:'';position:absolute;background:rgba(255,255,255,.1);border-radius:1px;
}
.hero-shape--cross::before{width:100%;height:2px;top:50%;transform:translateY(-50%)}
.hero-shape--cross::after{height:100%;width:2px;left:50%;transform:translateX(-50%)}
@keyframes hFloat{
  0%,100%{transform:translateY(0) rotate(0deg)}
  33%{transform:translateY(-18px) rotate(2deg)}
  66%{transform:translateY(10px) rotate(-1deg)}
}
@keyframes hSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
/* Placement */
.hs1{width:200px;height:200px;top:10%;left:5%;animation-delay:0s}
.hs2{width:120px;height:120px;top:60%;left:15%;animation-delay:2s;border-width:1.5px}
.hs3{width:80px;height:80px;top:20%;right:25%;animation-delay:1s}
.hs4{width:300px;height:300px;bottom:-60px;left:30%;animation-delay:3s;opacity:.5}
.hs5{top:35%;left:25%;animation-delay:.5s}
.hs6{width:40px;height:40px;bottom:20%;right:35%;animation-delay:4s}
.hs7{top:15%;right:40%;animation-delay:2.5s}
.hs8{width:160px;height:160px;bottom:15%;left:8%;animation-delay:1.5s;opacity:.4}
.HG{display:grid;grid-template-columns:1fr 460px;gap:var(--sp96);align-items:center;position:relative;z-index:1}
.HPill{display:inline-flex;align-items:center;gap:var(--sp10);border:1px solid rgba(255,255,255,.35);padding:var(--sp6) var(--sp14);border-radius:100px;margin-bottom:var(--sp28);font-family:var(--M);font-size:var(--t11);font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.HPill-dot{width:6px;height:6px;border-radius:50%;background:#fff;flex-shrink:0;box-shadow:0 0 0 2px rgba(255,255,255,.25);animation:pdot 2.4s ease infinite}
@keyframes pdot{0%,100%{opacity:.8}50%{opacity:1}}
.HH1{font-size:clamp(52px,9vw,96px);font-weight:700;line-height:1.04;letter-spacing:.015em;color:var(--white);margin-bottom:var(--sp24)}
.HH1 em{font-style:normal;color:var(--Adk)}
.HSub{font-size:var(--t15);line-height:1.8;color:rgba(255,255,255,.78);max-width:420px;margin-bottom:var(--sp40)}
.HSub strong{color:#fff;font-weight:500}
.HActs{display:flex;gap:var(--sp12);flex-wrap:wrap;margin-bottom:var(--sp48)}
.HInd{display:flex;flex-direction:column;gap:var(--sp10)}
.HInd-lbl{font-family:var(--M);font-size:var(--t10);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.HInd-tags{display:flex;flex-wrap:wrap;gap:var(--sp6)}
.HInd-tag{font-size:var(--t11);color:rgba(255,255,255,.7);padding:5px var(--sp10);border:1px solid rgba(255,255,255,.25);border-radius:var(--r4);letter-spacing:.02em;transition:color .13s,border-color .13s}
.HInd-tag:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.HMock{position:relative}
.HCard{border-radius:var(--r12);overflow:hidden;box-shadow:var(--shD)}
.HBadge{position:absolute;top:-12px;right:-12px;z-index:2;background:var(--D2);border:1px solid var(--Dbd2);border-radius:var(--r8);padding:10px var(--sp14);display:flex;align-items:center;gap:var(--sp8)}
.HBdot{width:7px;height:7px;border-radius:50%;background:#22C55E;flex-shrink:0;box-shadow:0 0 0 3px rgba(34,197,94,.15);animation:bdot 2.2s ease infinite}
@keyframes bdot{0%,100%{box-shadow:0 0 0 3px rgba(34,197,94,.15)}50%{box-shadow:0 0 0 5px rgba(34,197,94,.06)}}
.HBtxt{font-family:var(--M);font-size:var(--t11);color:rgba(255,255,255,.7);letter-spacing:.06em}
.HBtxt strong{color:#fff;font-weight:500}
@media(max-width:1100px){.HG{grid-template-columns:1fr 400px;gap:var(--sp64)}}
@media(max-width:900px){.HG{grid-template-columns:1fr;gap:var(--sp48)}.HMock{max-width:480px;margin:0 auto}.HBadge{display:none}}
@media(max-width:480px){#hero{padding:90px 0 var(--sp64)}.HH1{font-size:46px}}

/* ══════════════════════════════════════════════════════
   PROBLEM
══════════════════════════════════════════════════════ */
#problem{background:var(--paper)}
.PTop{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp80);align-items:end;margin-bottom:var(--sp64)}
.PTopR{font-size:var(--t15);color:var(--ink-52);line-height:1.8;padding:var(--sp16) 0;border-top:1px solid var(--ink-16);border-bottom:2px solid var(--ink-16)}
.PList{display:flex;flex-direction:column}
.PItem{display:grid;grid-template-columns:80px 1fr 160px 1px 160px;gap:0 var(--sp32);align-items:start;padding:var(--sp40) 0;border-top:1px solid var(--ink-08)}
.PItem:last-child{border-bottom:1px solid var(--ink-08)}
.PItem:hover .PN{color:var(--ink-16)}
.PItem:hover .PIco{border-color:var(--A);color:var(--A)}
.PItem:hover .PIllus{transform:scale(1.04)}
.PN{font-family:var(--M);font-size:clamp(44px,5vw,62px);font-weight:500;color:var(--ink-16);line-height:1;letter-spacing:-.04em;padding-top:var(--sp6);transition:color .2s}
.PIcoRow{display:flex;align-items:center;gap:var(--sp12);margin-bottom:var(--sp12)}
.PIco{width:36px;height:36px;border-radius:var(--r6);background:var(--white);border:1px solid var(--ink-08);display:grid;place-items:center;color:var(--ink-52);flex-shrink:0;transition:border-color .15s,color .15s}
.PT{font-size:var(--t20);font-weight:700;color:var(--ink);letter-spacing:.015em;line-height:1.25}
.PD{font-size:var(--t15);color:var(--ink-52);line-height:1.8;max-width:560px}
.PIllus{display:flex;align-items:center;justify-content:center;transition:transform .2s}
.PDiv{border-right:1px solid var(--ink-08);align-self:stretch}
.PStat{text-align:right;padding-top:var(--sp6)}
.PSV{font-family:var(--M);font-size:var(--t22);font-weight:500;color:var(--ink);letter-spacing:-.02em;line-height:1.15;margin-bottom:var(--sp4)}
.PSL{font-family:var(--M);font-size:var(--t11);color:var(--ink-32);letter-spacing:.06em}
@media(max-width:900px){.PTop{grid-template-columns:1fr;gap:var(--sp24)}.PItem{grid-template-columns:56px 1fr;gap:0 var(--sp24)}.PDiv,.PStat,.PIllus{display:none}}
@media(max-width:540px){.PN{font-size:36px}.PT{font-size:var(--t17)}.PD{font-size:var(--t13)}}

/* ══════════════════════════════════════════════════════
   FEATURES
══════════════════════════════════════════════════════ */
#features{background:var(--white)}
.FTop{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--sp32);margin-bottom:var(--sp56)}
.FTopNote{font-size:var(--t13);color:var(--ink-32);text-align:right;line-height:1.6;max-width:180px}
.FH{display:grid;grid-template-columns:5fr 4fr;background:var(--D);border:1px solid var(--Dbd);border-radius:var(--r10);overflow:hidden;margin-bottom:var(--sp16);min-height:400px}
.FHl{padding:var(--sp56) var(--sp64);display:flex;flex-direction:column;justify-content:center;position:relative}
.FHl::before{content:'';position:absolute;left:0;top:var(--sp48);bottom:var(--sp48);width:2px;background:linear-gradient(180deg,transparent 0%,var(--Adk) 40%,var(--Adk) 60%,transparent 100%);opacity:.55}
.FHl::after{content:'';position:absolute;bottom:0;left:0;right:0;height:80px;background:linear-gradient(to top,rgba(0,0,0,.12),transparent);pointer-events:none}
.FBadge{display:inline-flex;align-items:center;gap:var(--sp6);background:rgba(var(--Argb),.14);color:var(--Adk);font-family:var(--M);font-size:var(--t10);font-weight:500;letter-spacing:.13em;text-transform:uppercase;padding:var(--sp6) var(--sp12);border-radius:var(--r4);margin-bottom:var(--sp20);width:fit-content;border:1px solid rgba(var(--Argb),.2)}
.FHT{font-size:clamp(var(--t24),3vw,var(--t40));font-weight:700;color:var(--white);letter-spacing:.015em;line-height:1.18;margin-bottom:var(--sp16)}
.FHD{font-size:var(--t15);color:rgba(255,255,255,.65);line-height:1.82;max-width:380px}
.FHr{background:var(--D2);border-left:1px solid var(--Dbd);padding:var(--sp40);display:flex;align-items:center;justify-content:center}
/* ── Feature hero: dark-bg chat preview ──
   4-message exchange with bot avatar + read receipts */
.FChat{width:100%;max-width:308px;display:flex;flex-direction:column;gap:var(--sp12)}
.FCMsg{display:flex;align-items:flex-end;gap:var(--sp8)}
.FCMsg--usr{flex-direction:row-reverse}
.FC-ava{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--M);font-size:9px;font-weight:700;letter-spacing:.03em;
  /* bottom margin aligns avatar with bottom of the message column */
  margin-bottom:18px;
}
.FC-ava-ai{background:rgba(var(--Adkrgb),.2);color:var(--Adk)}
.FC-ava-usr{background:rgba(255,255,255,.1);color:rgba(255,255,255,.45)}
.FC-col{display:flex;flex-direction:column;max-width:82%}
.FC-bbl{padding:10px 14px;font-size:var(--t13);line-height:1.65;word-break:break-word}
.FC-bbl-ai{
  background:rgba(255,255,255,.08);color:rgba(255,255,255,.78);
  border-radius:4px 14px 14px 14px;
}
.FC-bbl-usr{
  background:var(--Adk);color:#fff;
  border-radius:14px 14px 4px 14px;
}
.FC-ts{
  font-family:var(--M);font-size:8px;margin-top:3px;
  display:flex;align-items:center;gap:3px;
}
.FC-ts-ai{color:rgba(255,255,255,.4)}
.FC-ts-usr{color:rgba(255,255,255,.4);justify-content:flex-end}
.FC-chk{color:rgba(255,255,255,.55)}
.FGW{border:1px solid var(--ink-08);border-radius:var(--r10);overflow:hidden}
.FG{display:grid;grid-template-columns:repeat(3,1fr)}
.FC{padding:var(--sp36);border-right:1px solid var(--ink-08);border-bottom:1px solid var(--ink-08);transition:background .14s;position:relative;overflow:hidden}
.FC:nth-child(3n){border-right:none}
.FC:nth-child(n+4){border-bottom:none}
.FC:hover{background:var(--ink-04)}
.FC::before{content:'';position:absolute;left:0;top:var(--sp36);bottom:var(--sp36);width:0;background:var(--A);transition:width .15s}
.FC:hover::before{width:2px}
.FC:hover .FIco{background:var(--Abg);color:var(--A)}
.FIco{width:40px;height:40px;background:var(--ink-04);border-radius:var(--r6);display:grid;place-items:center;color:var(--ink-32);margin-bottom:var(--sp16);transition:background .14s,color .14s}
.FCT{font-size:var(--t15);font-weight:700;color:var(--ink);margin-bottom:var(--sp8);letter-spacing:.015em;line-height:1.3}
.FCD{font-size:var(--t13);color:var(--ink-52);line-height:1.75}
@media(max-width:960px){.FH{grid-template-columns:1fr;min-height:auto}.FHl{padding:var(--sp40)}.FHr{border-left:none;border-top:1px solid var(--Dbd);padding:var(--sp32)}.FG{grid-template-columns:repeat(2,1fr)}.FC:nth-child(3n){border-right:1px solid var(--ink-08)}.FC:nth-child(2n){border-right:none}.FC:nth-child(n+5){border-bottom:none}.FC:nth-child(-n+4){border-bottom:1px solid var(--ink-08)}.FTop{grid-template-columns:1fr}.FTopNote{display:none}}
@media(max-width:540px){.FG{grid-template-columns:1fr}.FC{border-right:none!important;padding:var(--sp24)!important}.FC:not(:last-child){border-bottom:1px solid var(--ink-08)!important}.FHl{padding:var(--sp32) var(--sp24)}}

/* ══════════════════════════════════════════════════════
   DEMO — TABS + PANELS
══════════════════════════════════════════════════════ */
#demo{background:var(--paper)}
.DHead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp24);margin-bottom:var(--sp48);flex-wrap:wrap}
.DHeadSub{font-size:var(--t15);color:var(--ink-52);max-width:340px;line-height:1.75}
.Tabs{display:flex;width:fit-content;background:var(--white);border:1px solid var(--ink-16);border-radius:var(--r6);padding:var(--sp4);gap:var(--sp4);margin-bottom:var(--sp40)}
.Tab{display:flex;align-items:center;gap:var(--sp8);padding:var(--sp8) var(--sp20);border-radius:var(--r4);font-family:var(--F);font-size:var(--t13);font-weight:500;color:var(--ink-32);white-space:nowrap;min-height:36px;cursor:pointer;transition:background .13s,color .13s}
.Tab-num{font-family:var(--M);font-size:var(--t10);color:transparent;transition:color .13s}
.Tab.on{background:var(--ink);color:#fff;font-weight:700}
.Tab.on .Tab-num{color:rgba(255,255,255,.38)}
.Tab:hover:not(.on){background:var(--ink-04);color:var(--ink-72)}

/* Default panel: 2-column layout */
.Panel{display:none}
.Panel.on{display:grid;grid-template-columns:300px 1fr;gap:var(--sp64);align-items:start}

/* Calendar panel overrides to full-width */
#P4.Panel.on{display:block}

.PanTxt h3{font-size:var(--t24);font-weight:700;color:var(--ink);letter-spacing:.015em;line-height:1.25;margin-bottom:var(--sp16)}
.PanTxt p{font-size:var(--t15);color:var(--ink-52);line-height:1.8}
.PanFL{margin-top:var(--sp28);display:flex;flex-direction:column;gap:14px}
.PanFI{display:flex;align-items:flex-start;gap:var(--sp12)}
.PanFCk{width:18px;height:18px;border-radius:50%;background:var(--greenbg);display:grid;place-items:center;flex-shrink:0;margin-top:3px;color:var(--green)}
.PanFI p{font-size:var(--t13);color:var(--ink-52);line-height:1.65;margin:0}
.PanBW{background:var(--white);border-radius:var(--r12);border:1px solid var(--ink-16);box-shadow:var(--sh2);overflow:hidden}
.PanBar{display:flex;align-items:center;gap:var(--sp12);padding:var(--sp12) var(--sp16);border-bottom:1px solid var(--ink-08);background:#ECEAE7}
.PanURL{flex:1;text-align:center;font-family:var(--M);font-size:var(--t11);color:var(--ink-32);background:rgba(0,0,0,.05);padding:5px var(--sp16);border-radius:var(--r4)}
.PanBD{padding:var(--sp24)}
.AS{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp12);margin-bottom:var(--sp20)}
.ASC{background:var(--paper);border:1px solid var(--ink-08);border-radius:var(--r6);padding:var(--sp16)}
.ASCL{display:block;font-family:var(--M);font-size:var(--t10);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-32);margin-bottom:var(--sp8)}
.ASCV{font-size:var(--t24);font-weight:700;color:var(--ink);letter-spacing:-.02em;line-height:1}
.ASCV sup{font-size:var(--t12);font-weight:500;color:var(--ink-32);letter-spacing:0}
.AT{display:flex;flex-direction:column;gap:2px}
.AR{display:grid;grid-template-columns:48px 1fr auto;gap:var(--sp12);align-items:center;padding:var(--sp12) var(--sp16);border-radius:var(--r4);background:var(--paper)}
.ART{font-family:var(--M);font-size:var(--t12);color:var(--ink-32)}
.ARN{font-size:var(--t13);font-weight:500;color:var(--ink)}
.Bdg{font-family:var(--M);font-size:var(--t10);font-weight:500;padding:3px var(--sp8);border-radius:var(--r2);letter-spacing:.06em}
.BOK{background:var(--greenbg);color:var(--green)}
.BPN{background:var(--Abg);color:var(--A)}
/* ── Chat widget (Panel 3) — full chatbot UI ──
   Structure: header → messages → input bar
   Messages: bot (left, avatar) / user (right, amber)
   Typing: animated 3-dot indicator
   Confirmation: green card inside final bot message */
.CW{display:flex;flex-direction:column;height:490px}
/* Header: amber, bot avatar + name + live status */
.CW-head{
  background:var(--A);padding:12px var(--sp16);
  display:flex;align-items:center;gap:var(--sp10);flex-shrink:0;
}
.CW-hava{
  width:36px;height:36px;border-radius:50%;flex-shrink:0;
  background:rgba(255,255,255,.18);display:grid;place-items:center;color:#fff;
}
.CW-info{}
.CW-hname{font-size:var(--t15);font-weight:700;color:#fff;line-height:1.2}
.CW-status{
  display:flex;align-items:center;gap:4px;margin-top:2px;
  font-family:var(--M);font-size:var(--t10);color:rgba(255,255,255,.72);letter-spacing:.04em;
}
.CW-sdot{width:6px;height:6px;border-radius:50%;background:#4ADE80;flex-shrink:0;animation:cwp 2.2s ease infinite}
@keyframes cwp{0%,100%{opacity:.65}50%{opacity:1}}
/* Scrollable messages area */
.CW-msgs{
  flex:1;overflow-y:auto;padding:14px 12px;
  display:flex;flex-direction:column;gap:10px;
  background:#F6F7FB;
}
.CW-msgs::-webkit-scrollbar{width:4px}
.CW-msgs::-webkit-scrollbar-thumb{background:var(--ink-08);border-radius:2px}
/* Date divider */
.CW-sep{
  display:flex;align-items:center;gap:var(--sp8);
  font-family:var(--M);font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-32);margin:2px 0;
}
.CW-sep::before,.CW-sep::after{content:'';flex:1;height:1px;background:var(--ink-08)}
/* Message groups */
.CW-grp{display:flex;flex-direction:column}
.CW-grp--bot{align-items:flex-start}
.CW-grp--usr{align-items:flex-end}
/* Bot row: small avatar + bubble */
.CW-brow{display:flex;align-items:flex-end;gap:var(--sp8)}
.CW-ava{
  width:26px;height:26px;border-radius:50%;flex-shrink:0;
  background:var(--A);display:grid;place-items:center;
  color:#fff;font-family:var(--M);font-size:9px;font-weight:700;
  margin-bottom:2px;
}
/* Spacer used for stacked bot messages that share one avatar */
.CW-avspc{width:26px;flex-shrink:0}
/* Bubbles */
.CW-bbl{padding:10px 13px;font-size:var(--t13);line-height:1.68;word-break:break-word}
.CW-bbl--bot{
  background:var(--white);color:var(--ink);
  border-radius:4px 14px 14px 14px;
  box-shadow:0 1px 3px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.04);
  max-width:80%;
}
.CW-bbl--usr{
  background:var(--A);color:#fff;
  border-radius:14px 14px 4px 14px;max-width:80%;
}
/* Timestamp + read receipt rows */
.CW-meta{
  display:flex;align-items:center;gap:3px;
  font-family:var(--M);font-size:9px;color:var(--ink-32);margin-top:4px;
}
.CW-meta--bot{padding-left:34px}
.CW-meta--usr{justify-content:flex-end}
.CW-chk{color:rgba(255,255,255,.65);display:flex;align-items:center}
/* Typing indicator: 3 dots bounce up */
.CW-typing{
  display:flex;gap:4px;align-items:center;
  padding:12px 14px;background:var(--white);width:fit-content;
  border-radius:4px 14px 14px 14px;
  box-shadow:0 1px 3px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.04);
}
.CW-tdot{
  width:6px;height:6px;border-radius:50%;background:var(--ink-32);
  animation:cwt 1.4s ease-in-out infinite;
}
.CW-tdot:nth-child(2){animation-delay:.18s}
.CW-tdot:nth-child(3){animation-delay:.36s}
@keyframes cwt{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:1;transform:translateY(-3px)}}
/* Confirmation card (green, inside bot bubble) */
.CW-card{
  margin-top:var(--sp8);
  background:var(--greenbg);border:1px solid rgba(21,93,49,.18);
  border-radius:var(--r8);padding:10px 12px;
}
.CW-card-ttl{
  display:flex;align-items:center;gap:5px;
  font-size:var(--t12);font-weight:700;color:var(--green);margin-bottom:var(--sp8);
}
.CW-card-row{display:flex;gap:var(--sp6);font-size:var(--t12);color:var(--ink);margin-bottom:4px}
.CW-card-row:last-child{margin-bottom:0}
.CW-card-lbl{color:var(--ink-52);min-width:64px;font-size:var(--t11);flex-shrink:0}
/* Input bar: disabled demo state */
.CW-input{
  display:flex;align-items:center;gap:var(--sp8);padding:10px 12px;
  background:var(--white);border-top:1px solid var(--ink-08);flex-shrink:0;
}
.CW-iattach{
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-32);flex-shrink:0;
}
.CW-ifield{
  flex:1;background:var(--ink-04);border:1px solid var(--ink-08);
  border-radius:20px;padding:8px 14px;font-family:var(--F);
  font-size:var(--t13);color:var(--ink-32);line-height:1.4;cursor:default;
}
.CW-isend{
  width:32px;height:32px;border-radius:50%;background:var(--A);
  display:grid;place-items:center;color:#fff;flex-shrink:0;opacity:.45;
}

@media(max-width:860px){.Panel.on{grid-template-columns:1fr;gap:var(--sp32)}.DHead{flex-direction:column;align-items:flex-start}.AS{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.AS{grid-template-columns:1fr}.Tabs{width:100%;flex-wrap:wrap}.Tab{flex:1;justify-content:center}}

/* ══════════════════════════════════════════════════════
   CALENDAR — FullCalendar-style timegrid
   Architecture:
   • .Cal-outer: overflow-x:auto wrapper for mobile
   • .Cal-head: sticky day header row
   • .Cal-body: scrollable 440px container
     – .Cal-tcol: time labels (52px)
     – .Cal-dcol × 6: each day column, height = 10 × --calH
       – ::before: repeating hourly grid lines
       – .Cal-evt: absolutely positioned events
       – .Cal-now: current time indicator (on today col)
══════════════════════════════════════════════════════ */
.Cal-outer{
  overflow-x:auto;
  border-radius:var(--r10);
  border:1px solid var(--ink-16);
  background:var(--white);
  box-shadow:var(--sh2);
  -webkit-overflow-scrolling:touch;
}
/* Toolbar: week nav + label + view toggle */
.Cal-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--sp12) var(--sp16);
  background:var(--ink-04);
  border-bottom:1px solid var(--ink-08);
  gap:var(--sp12);flex-wrap:wrap;
}
.Cal-toolbar-l{display:flex;align-items:center;gap:var(--sp8)}
.Cal-nav{
  width:30px;height:30px;border-radius:var(--r4);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-52);border:1px solid var(--ink-16);
  background:var(--white);cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;flex-shrink:0;
}
.Cal-nav:hover{background:var(--paper);border-color:var(--ink-32);color:var(--ink)}
.Cal-today-btn{
  font-family:var(--M);font-size:var(--t11);font-weight:500;
  letter-spacing:.08em;padding:0 var(--sp12);height:30px;
  display:flex;align-items:center;
  background:var(--white);border:1px solid var(--ink-16);
  border-radius:var(--r4);color:var(--ink-52);cursor:pointer;
  transition:background .12s,color .12s;
}
.Cal-today-btn:hover{background:var(--paper);color:var(--ink)}
.Cal-week-label{
  font-size:var(--t15);font-weight:700;color:var(--ink);letter-spacing:.01em;
  margin-left:var(--sp4);
}
.Cal-toolbar-r{display:flex;align-items:center;gap:0}
.Cal-view-btn{
  font-family:var(--M);font-size:var(--t11);font-weight:500;
  letter-spacing:.08em;padding:0 var(--sp12);height:30px;
  display:flex;align-items:center;
  border:1px solid var(--ink-16);background:var(--white);color:var(--ink-32);cursor:pointer;
  transition:background .12s,color .12s;
}
.Cal-view-btn:first-child{border-radius:var(--r4) 0 0 var(--r4)}
.Cal-view-btn:last-child{border-radius:0 var(--r4) var(--r4) 0;border-left:none}
.Cal-view-btn.on{background:var(--ink);color:#fff;border-color:var(--ink);z-index:1}

/* Calendar inner wrapper: min-width for scroll */
.Cal-inner{min-width:600px}

/* Day header row — sticky */
.Cal-head{
  display:grid;
  grid-template-columns:52px repeat(6,1fr);
  position:sticky;top:0;z-index:10;background:var(--white);
  border-bottom:1.5px solid var(--ink-08);
}
.Cal-head-gu{border-right:1px solid var(--ink-08)}
.Cal-dh{
  text-align:center;padding:var(--sp10) var(--sp4) var(--sp8);
  border-right:1px solid var(--ink-08);
  cursor:default;
}
.Cal-dh:last-child{border-right:none}
.Cal-dh-day{
  display:block;font-family:var(--M);font-size:var(--t10);
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-32);margin-bottom:var(--sp4);
}
.Cal-dh-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  font-size:var(--t17);font-weight:700;color:var(--ink);
  line-height:1;margin:0 auto;
}
/* Today: amber circle */
.Cal-dh--today .Cal-dh-day{color:var(--A)}
.Cal-dh--today .Cal-dh-num{background:var(--A);color:#fff}

/* Scrollable body */
.Cal-body{
  display:flex;
  max-height:440px;
  overflow-y:auto;
  scroll-behavior:smooth;
}
/* Custom scrollbar — subtle */
.Cal-body::-webkit-scrollbar{width:6px}
.Cal-body::-webkit-scrollbar-track{background:transparent}
.Cal-body::-webkit-scrollbar-thumb{background:var(--ink-08);border-radius:3px}
.Cal-body::-webkit-scrollbar-thumb:hover{background:var(--ink-16)}

/* Time label column */
.Cal-tcol{
  width:52px;flex-shrink:0;
  border-right:1px solid var(--ink-08);
  position:relative;
}
.Cal-tl{
  height:var(--calH);
  display:flex;align-items:flex-start;justify-content:flex-end;
  padding-top:var(--sp4);padding-right:var(--sp8);
  font-family:var(--M);font-size:var(--t10);color:var(--ink-32);
  letter-spacing:.04em;
  /* Offset label visually to align with grid lines */
  margin-top:-8px;padding-top:0;
}
.Cal-tl:first-child{margin-top:0}

/* Day columns container */
.Cal-dcols{display:flex;flex:1}

/* Individual day column */
.Cal-dcol{
  flex:1;
  border-right:1px solid var(--ink-08);
  position:relative;
  height:calc(10 * var(--calH)); /* 9:00–19:00 = 10 hours */
  min-width:0;
}
.Cal-dcol:last-child{border-right:none}

/* Today column: very subtle tint */
.Cal-dcol--today{background:rgba(var(--Argb),.018)}

/* Hourly background lines via repeating gradient */
.Cal-dcol::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent calc(var(--calH) - 1px),
    var(--ink-08) calc(var(--calH) - 1px),
    var(--ink-08) var(--calH)
  );
}
/* Half-hour dotted lines */
.Cal-dcol::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent calc(var(--calH)/2 - 1px),
    rgba(228,234,240,.7) calc(var(--calH)/2 - 1px),
    rgba(228,234,240,.7) calc(var(--calH)/2),
    transparent calc(var(--calH)/2),
    transparent calc(var(--calH) - 1px),
    transparent var(--calH)
  );
}

/* ── Calendar events ── */
.Cal-evt{
  position:absolute;z-index:2;
  left:3px;right:3px;
  border-radius:var(--r4);padding:5px 8px;
  overflow:hidden;cursor:pointer;
  transition:filter .12s,box-shadow .12s,transform .1s;
  border-left-width:3px;border-left-style:solid;
}
.Cal-evt:hover{
  filter:brightness(.95);
  box-shadow:0 2px 12px rgba(0,0,0,.12);
  transform:scale(1.02);
  z-index:5;
}
/* Event title */
.Cal-et{
  display:block;font-size:var(--t11);font-weight:700;
  line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Event time */
.Cal-em{
  display:block;font-family:var(--M);font-size:9px;
  opacity:.7;margin-top:2px;white-space:nowrap;
}

/* Color variants */
.Cal-g{background:#DDFBEC;color:#115D30;border-left-color:#22C55E}  /* confirmed green */
.Cal-a{background:var(--Abg);color:var(--Ah);border-left-color:var(--A)}  /* pending amber */
.Cal-b{background:#EEF4FF;color:#2347C8;border-left-color:#5B8BF5}  /* new booking blue */

/* Current time indicator */
.Cal-now{
  position:absolute;left:0;right:0;z-index:4;
  display:flex;align-items:center;pointer-events:none;
}
.Cal-now::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--red);flex-shrink:0;margin-left:-1px}
.Cal-now::after{content:'';flex:1;height:2px;background:var(--red);opacity:.85}

/* Calendar legend */
.Cal-legend{
  display:flex;align-items:center;gap:var(--sp20);
  padding:var(--sp10) var(--sp16);
  border-top:1px solid var(--ink-08);
  background:var(--ink-04);
  border-radius:0 0 var(--r10) var(--r10);
}
.Cal-lg-item{display:flex;align-items:center;gap:var(--sp6);font-size:var(--t11);color:var(--ink-52)}
.Cal-lg-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.Cal-lg-g{background:#22C55E}
.Cal-lg-a{background:var(--A)}
.Cal-lg-b{background:#5B8BF5}

@media(max-width:860px){#P4.Panel.on{overflow-x:auto}}
@media(max-width:480px){.Cal-outer{border-radius:var(--r6)}.Cal-toolbar{padding:var(--sp8)}.Cal-week-label{font-size:var(--t13)}.Cal-view-btn{display:none}}

/* ══════════════════════════════════════════════════════
   RESULTS
══════════════════════════════════════════════════════ */
#results{background:var(--D)}
.RSHead{margin-bottom:var(--sp64)}
.SBar{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp24);margin-bottom:var(--sp80)}
.SC{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:var(--sp40) var(--sp20);
  border-radius:50%;aspect-ratio:1;
  border:2px solid rgba(255,255,255,.15);
  background:rgba(255,255,255,.06);
  justify-content:center;
  transition:border-color .2s,background .2s,transform .2s;
  max-width:200px;margin:0 auto;width:100%;
}
.SC:hover{border-color:rgba(var(--Adkrgb),.4);background:rgba(var(--Adkrgb),.08);transform:scale(1.04)}
.SV{font-family:var(--M);font-size:clamp(32px,3.5vw,48px);font-weight:700;color:var(--white);letter-spacing:-.04em;line-height:1;margin-bottom:var(--sp8);display:flex;align-items:baseline;justify-content:center;gap:var(--sp2)}
.SA{color:var(--Adk);font-size:.65em;letter-spacing:-.02em}
.SL{font-size:var(--t12);color:rgba(255,255,255,.7);letter-spacing:.03em;line-height:1.4}
.TM{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp20)}
.TC2{background:var(--D2);border:1px solid var(--Dbd);border-radius:var(--r10);padding:var(--sp32);display:flex;flex-direction:column;transition:border-color .2s,transform .2s}
.TC2:hover{border-color:rgba(var(--Adkrgb),.3);transform:translateY(-3px)}
.TC2-kpi{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:var(--sp20);padding-bottom:var(--sp20);border-bottom:1px solid var(--Dbd)}
.TC2-kv{font-family:var(--M);font-size:var(--t17);font-weight:500;color:var(--Adk);letter-spacing:-.01em}
.TC2-kp{font-family:var(--M);font-size:var(--t10);color:rgba(255,255,255,.6);letter-spacing:.06em}
.TC2-q{font-size:52px;line-height:.9;color:rgba(255,255,255,.07);font-family:Georgia,serif;margin-bottom:var(--sp10)}
.TC2-body{font-size:var(--t15);color:rgba(255,255,255,.72);line-height:1.82;flex:1}
.TC2-auth{margin-top:var(--sp24);padding-top:var(--sp20);border-top:1px solid var(--Dbd)}
.TC2-name{font-size:var(--t15);font-weight:700;color:#fff;margin-bottom:var(--sp4)}
.TC2-role{font-size:var(--t12);color:rgba(255,255,255,.65);letter-spacing:.03em}
@media(max-width:960px){.SBar{grid-template-columns:repeat(2,1fr);gap:var(--sp20)}.TM{grid-template-columns:1fr}}
@media(max-width:480px){.SBar{gap:var(--sp16)}.SC{max-width:160px;padding:var(--sp24) var(--sp16)}}

/* ══════════════════════════════════════════════════════
   CONTACT — Form-based conversion UI
   Layout: left (trust) / right (form card)
   CTA hierarchy:
     1. Form submit (primary — amber, full-width)
     2. Phone link (secondary — inline text with icon)
   Trust signals: SSL · response time · no sales pressure
══════════════════════════════════════════════════════ */
#contact{
  background:var(--paper);
}
.CTG{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp80);align-items:start}

/* Left: trust + proof */
.CTH{font-size:clamp(var(--t28),3.6vw,46px);font-weight:700;color:var(--ink);letter-spacing:.015em;line-height:1.2;margin-bottom:var(--sp20)}
.CTSub{font-size:var(--t15);color:var(--ink-52);line-height:1.82;max-width:380px;margin-bottom:var(--sp40)}

/* Trust bullets */
.CTTrust-list{display:flex;flex-direction:column;gap:var(--sp12);margin-bottom:var(--sp40)}
.CTTrust-item{display:flex;align-items:flex-start;gap:var(--sp12)}
.CTTrust-ico{
  width:32px;height:32px;flex-shrink:0;border-radius:var(--r6);
  display:grid;place-items:center;
}
.CTT-g{background:var(--greenbg);color:var(--green)}
.CTT-a{background:var(--Abg);color:var(--A)}
.CTT-b{background:var(--bluebg);color:var(--blue)}
.CTTrust-item-text{}
.CTTrust-item-title{font-size:var(--t15);font-weight:700;color:var(--ink);margin-bottom:2px}
.CTTrust-item-sub{font-size:var(--t13);color:var(--ink-52);line-height:1.5}

.CT-divider{width:32px;height:1px;background:var(--ink-16);margin:var(--sp32) 0}
.CT-pnum{font-family:var(--M);font-size:var(--t40);font-weight:500;color:var(--ink);letter-spacing:-.04em;line-height:1}
.CT-pnum em{color:var(--A);font-style:normal}
.CT-plbl{font-size:var(--t13);color:var(--ink-32);margin-top:var(--sp6)}

/* Right: form card */
.CT-form-card{
  background:var(--white);
  border:1px solid var(--ink-16);
  border-radius:var(--r12);
  padding:var(--sp40);
  box-shadow:var(--sh1);
}
.CT-form-title{
  font-size:var(--t17);font-weight:700;color:var(--ink);
  letter-spacing:.01em;margin-bottom:var(--sp6);
}
.CT-form-sub{font-size:var(--t13);color:var(--ink-52);line-height:1.6;margin-bottom:var(--sp28)}

/* Form field rows */
.FRow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp16);margin-bottom:var(--sp16)}
.FRow-full{margin-bottom:var(--sp16)}
.FField{display:flex;flex-direction:column;gap:var(--sp6)}
.FLabel{font-size:var(--t12);font-weight:500;color:var(--ink-52);letter-spacing:.02em}
.FReq{color:var(--A);margin-left:2px}
/* Input base — all form controls share this */
.FIn{
  width:100%;padding:11px var(--sp16);
  border:1.5px solid var(--ink-16);border-radius:var(--r6);
  font-family:var(--F);font-size:var(--t15);color:var(--ink);
  background:var(--white);line-height:1.5;
  transition:border-color .14s,box-shadow .14s,background .14s;
  appearance:none;-webkit-appearance:none;
}
.FIn:hover{border-color:var(--ink-32)}
.FIn:focus{outline:none;border-color:var(--A);box-shadow:0 0 0 3px rgba(var(--Argb),.1);background:var(--white)}
.FIn::placeholder{color:var(--ink-32)}
/* Select: custom chevron */
select.FIn{
  cursor:pointer;
  padding-right:var(--sp40);
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238799AC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--sp14) center;
}
/* Textarea */
textarea.FIn{
  resize:vertical;min-height:112px;
  line-height:1.72;
}
/* Submit button — full-width, primary CTA */
.FSubmit{
  display:flex;width:100%;align-items:center;justify-content:center;gap:var(--sp10);
  padding:16px var(--sp32);min-height:56px;
  background:var(--A);color:#fff;
  font-family:var(--F);font-size:var(--t15);font-weight:700;letter-spacing:.025em;
  border:none;border-radius:var(--r6);cursor:pointer;
  transition:background .13s,transform .08s;
  margin-top:var(--sp24);
}
.FSubmit:hover{background:var(--Ah)}
.FSubmit:active{transform:translateY(1px)}
.FSubmit svg{flex-shrink:0;transition:transform .13s}
.FSubmit:hover svg{transform:translateX(3px)}

/* Trust strip below submit */
.FTrust{
  display:flex;align-items:center;justify-content:center;
  gap:var(--sp20);margin-top:var(--sp16);
  flex-wrap:wrap;
}
.FTrust-item{
  display:flex;align-items:center;gap:var(--sp6);
  font-size:var(--t11);color:var(--ink-32);
  font-family:var(--M);letter-spacing:.04em;
}
.FTrust-item svg{color:var(--A);flex-shrink:0}

/* Privacy note */
.FPrivacy{
  font-size:var(--t11);color:var(--ink-32);
  text-align:center;margin-top:var(--sp12);
  line-height:1.6;
}
.FPrivacy a{color:var(--A);text-decoration:underline;text-underline-offset:2px}

/* Phone secondary CTA inside form card */
.CT-phone-cta{
  display:flex;align-items:center;justify-content:center;gap:var(--sp8);
  margin-top:var(--sp16);
  font-size:var(--t13);color:var(--ink-52);
}
.CT-phone-cta a{
  font-family:var(--M);font-size:var(--t15);font-weight:500;
  color:var(--ink);letter-spacing:-.01em;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ink-16);
  transition:color .13s,text-decoration-color .13s;
}
.CT-phone-cta a:hover{color:var(--A);text-decoration-color:var(--A)}

@media(max-width:860px){.CTG{grid-template-columns:1fr;gap:var(--sp56)}.CTSub{max-width:100%}}
@media(max-width:560px){.FRow{grid-template-columns:1fr;gap:var(--sp12)}.CT-form-card{padding:var(--sp24)}}

/* ══════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════ */
/* ── Footer: 4-col grid — brand | nav | company | contact ── */
#footer{background:var(--D);border-top:1px solid var(--Dbd);padding:var(--sp80) 0 var(--sp40)}
.FtG{
  display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;
  gap:var(--sp32) var(--sp40);
  padding-bottom:var(--sp40);
  border-bottom:1px solid var(--Dbd);
  margin-bottom:var(--sp24);
}
.FtLogo{
  font-size:22px;font-weight:700;letter-spacing:-.01em;color:#fff;
  display:inline-flex;align-items:baseline;gap:var(--sp6);margin-bottom:var(--sp14);
}
.FtLD{
  font-family:var(--M);font-size:12px;font-weight:700;letter-spacing:.08em;
  color:var(--Adk);background:rgba(var(--Adkrgb),.15);padding:2px 8px;border-radius:var(--r4);
}
.FtTag{font-size:var(--t13);color:rgba(255,255,255,.5);line-height:1.75;max-width:300px}
.FtCH{
  font-family:var(--M);font-size:var(--t10);font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.35);margin-bottom:var(--sp16);
  padding-bottom:var(--sp10);border-bottom:1px solid var(--Dbd);
}
.FtLinks{display:flex;flex-direction:column;gap:var(--sp10)}
.FtLinks li{list-style:none}
.FtLinks a{font-size:var(--t13);color:rgba(255,255,255,.55);transition:color .13s,padding-left .13s}
.FtLinks a:hover{color:rgba(255,255,255,.92);padding-left:4px}
/* Contact column */
.Ft-cv{font-size:var(--t13);color:rgba(255,255,255,.55);line-height:1.6;display:block;margin-bottom:var(--sp10)}
.Ft-cv a{color:rgba(255,255,255,.55);transition:color .13s}
.Ft-cv a:hover{color:var(--Adk)}
.Ft-hours{
  display:inline-flex;align-items:center;gap:var(--sp6);
  font-family:var(--M);font-size:var(--t10);color:rgba(255,255,255,.35);
  letter-spacing:.04em;margin-top:var(--sp6);
  padding:var(--sp4) var(--sp10);
  border:1px solid var(--Dbd);border-radius:100px;
}
/* Bottom bar */
.FtBot{display:flex;align-items:center;justify-content:space-between;gap:var(--sp16);flex-wrap:wrap}
.FtCopy{font-family:var(--M);font-size:var(--t11);color:rgba(255,255,255,.35);letter-spacing:.06em}
.FtNav{display:flex;gap:var(--sp20)}
.FtNav a{font-size:var(--t11);color:rgba(255,255,255,.4);transition:color .13s;position:relative}
.FtNav a:hover{color:rgba(255,255,255,.8)}
.FtNav a+a::before{content:'·';position:absolute;left:calc(-10px - .5ch);color:rgba(255,255,255,.2);pointer-events:none}
@media(max-width:900px){.FtG{grid-template-columns:1fr 1fr;gap:var(--sp32)}}
@media(max-width:560px){.FtG{grid-template-columns:1fr;gap:var(--sp28)}.FtBot{flex-direction:column;align-items:flex-start;gap:var(--sp12)}.FtNav{flex-wrap:wrap;gap:var(--sp12)}}

/* ══════════════════════════════════════════════════════
   LOGOS TRUST BAR
   After hero — establishes credibility immediately
══════════════════════════════════════════════════════ */
#logos{
  background:var(--white);padding:var(--sp28) 0;
  border-bottom:1px solid var(--ink-08);
  box-shadow:inset 0 2px 12px rgba(0,0,0,.03);
  overflow:hidden;
}
.logos-inner{display:flex;flex-direction:column;align-items:center;gap:var(--sp16)}
.logos-lbl{
  font-family:var(--M);font-size:var(--t11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-32);
}
/* Marquee wrapper — masks overflow + fade edges */
.logos-marquee{
  width:100%;position:relative;
  mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 8%,#000 92%,transparent 100%);
}
/* Track — holds two identical sets side by side */
.logos-track{
  display:flex;align-items:center;gap:var(--sp16);
  width:max-content;
  animation:marquee 28s linear infinite;
}
.logos-track:hover{animation-play-state:paused}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* Individual set wrapper */
.logos-set{display:flex;align-items:center;gap:var(--sp16);flex-shrink:0}
.logo-chip{
  display:flex;align-items:center;gap:var(--sp10);
  padding:var(--sp8) var(--sp20) var(--sp8) var(--sp8);border-radius:var(--r8);
  background:var(--white);border:1px solid var(--ink-08);
  transition:border-color .14s,box-shadow .14s;
  flex-shrink:0;
}
.logo-chip:hover{border-color:rgba(var(--Argb),.25);box-shadow:0 2px 8px rgba(var(--Argb),.08)}
.logo-chip-ico{
  width:40px;height:40px;border-radius:var(--r6);
  display:grid;place-items:center;flex-shrink:0;
  overflow:hidden;
}
.logo-chip-name{font-size:var(--t13);font-weight:600;color:var(--ink-72);white-space:nowrap;letter-spacing:.01em}
.logos-note{font-family:var(--M);font-size:var(--t10);color:var(--ink-32);letter-spacing:.06em;margin-top:var(--sp4)}
@media(prefers-reduced-motion:reduce){.logos-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}.logos-set:nth-child(2){display:none}.logos-marquee{mask-image:none;-webkit-mask-image:none}}
@media(max-width:600px){.logo-chip{padding:var(--sp6) var(--sp12)}}

/* ══════════════════════════════════════════════════════
   REASONS WHY — 3 illustrated reason cards
   After problem, before features
══════════════════════════════════════════════════════ */
#reasons{background:var(--white)}
.reasons-head{text-align:center;margin-bottom:var(--sp56)}
.reasons-head .SH{margin-top:var(--sp8)}
.reasons-head-sub{
  font-size:var(--t15);color:var(--ink-52);line-height:1.8;
  max-width:520px;margin:var(--sp16) auto 0;
}
.reasons-g{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp24);
}
.RC{
  background:var(--ink-04);border:1px solid var(--ink-08);
  border-radius:var(--r12);padding:var(--sp40) var(--sp32);
  display:flex;flex-direction:column;align-items:center;text-align:center;
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.RC:hover{box-shadow:var(--sh2);transform:translateY(-4px);border-color:rgba(var(--Argb),.3)}
.RC-illus{
  width:180px;height:130px;margin-bottom:var(--sp24);
  display:flex;align-items:center;justify-content:center;
}
.RC-num{
  font-family:var(--M);font-size:var(--t11);letter-spacing:.14em;
  text-transform:uppercase;color:var(--A);margin-bottom:var(--sp10);
}
.RC-title{
  font-size:var(--t20);font-weight:700;color:var(--ink);
  letter-spacing:.015em;line-height:1.3;margin-bottom:var(--sp12);
}
.RC-desc{font-size:var(--t13);color:var(--ink-52);line-height:1.82;text-align:left}
.RC-stat{
  margin-top:var(--sp16);padding:var(--sp12) var(--sp20);
  background:var(--white);border-radius:var(--r8);
  border:1px solid var(--ink-08);
  font-family:var(--M);font-size:var(--t11);color:var(--ink-52);
  letter-spacing:.04em;
}
.RC-stat strong{color:var(--A);font-size:var(--t17);letter-spacing:-.02em;margin-right:3px}
@media(max-width:900px){
  .reasons-g{grid-template-columns:1fr;max-width:440px;margin:0 auto}
}
@media(max-width:480px){.RC{padding:var(--sp32) var(--sp24)}}

/* ══ SPEECH BUBBLE BADGE ══ */
.bubble-badge{
  display:inline-block;position:relative;
  background:var(--white);color:var(--A);
  font-size:var(--t13);font-weight:700;letter-spacing:.02em;
  padding:var(--sp6) var(--sp16);border-radius:100px;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  margin-bottom:var(--sp20);
}
.bubble-badge::after{
  content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
  width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;
  border-top:7px solid var(--white);
}
.bubble-badge--A{background:var(--A);color:#fff}
.bubble-badge--A::after{border-top-color:var(--A)}

/* ══════════════════════════════════════════════════════
   DECORATIVE BACKGROUND ELEMENTS
   Section-specific shapes that relate to content meaning.
   Japanese LP style: clean, geometric, purposeful.
══════════════════════════════════════════════════════ */
.deco{position:absolute;pointer-events:none;z-index:0}
/* Base shapes */
.deco-ring{border-radius:50%;border:2.5px solid rgba(var(--Argb),.12)}
.deco-fill{border-radius:50%;background:rgba(var(--Argb),.05)}
.deco-grid{
  background-image:
    linear-gradient(rgba(var(--Argb),.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--Argb),.06) 1px,transparent 1px);
  background-size:40px 40px;
}
.deco-dots{
  background-image:radial-gradient(rgba(var(--Argb),.12) 1.5px,transparent 1.5px);
  background-size:20px 20px;
}
.deco-stripe{
  background:repeating-linear-gradient(
    -45deg,transparent,transparent 10px,
    rgba(var(--Argb),.05) 10px,rgba(var(--Argb),.05) 11px
  );
}
/* Sections need relative + overflow hidden */
#problem,#reasons,#features,#demo,#flow,#pricing,#faq,#contact,#midcta{position:relative;overflow:hidden}

/*
 * All decorative elements MUST stay inside their section.
 * Use positive top/bottom values (never extend above section).
 * overflow:hidden on sections clips properly.
 */

/* ── Problem: dot grid (repetitive manual work) ── */
#problem .deco-prob{width:280px;height:280px;top:40px;right:-80px;border-radius:50%}
#problem .deco-prob2{width:180px;height:180px;bottom:60px;left:-60px;opacity:.5}

/* ── Reasons: trust ring bottom-left ── */
#reasons .deco-reas{width:360px;height:360px;bottom:20px;left:-180px}
#reasons .deco-reas2{width:120px;height:120px;top:100px;right:-30px;opacity:.4}

/* ── Features: grid (system/structure) ── */
#features .deco-feat{width:320px;height:320px;top:60px;left:-100px;border-radius:var(--r12);opacity:.5}

/* ── Demo: dot pattern (interface) ── */
#demo .deco-demo{width:240px;height:240px;bottom:40px;right:-80px;border-radius:50%;opacity:.4}

/* ── Mid-CTA: diagonal stripes on blue bg ── */
#midcta .deco-mcta{
  inset:0;
  background:repeating-linear-gradient(
    -45deg,transparent,transparent 20px,
    rgba(255,255,255,.03) 20px,rgba(255,255,255,.03) 21px
  );
}

/* ── Pricing: stripe (structured tiers) ── */
#pricing .deco-price{width:340px;height:340px;top:40px;right:-120px;border-radius:50%;opacity:.5}

/* ── Flow: ring pair (connected steps) ── */
#flow .deco-flow1{width:260px;height:260px;bottom:40px;right:-100px}
#flow .deco-flow2{width:160px;height:160px;bottom:80px;right:20px;opacity:.3}

/* ── FAQ: dotted (questions) ── */
#faq .deco-faq{width:200px;height:200px;top:80px;right:-60px;border-radius:50%;opacity:.4}

/* ── Contact: filled circle INSIDE section (not bleeding above) + grid ── */
#contact .deco-cont1{width:400px;height:400px;top:40px;right:-120px;opacity:.6}
#contact .deco-cont2{width:260px;height:340px;bottom:40px;left:-80px;border-radius:var(--r12);opacity:.35}

/* ── Results (dark bg): white-based shapes ── */
#results{position:relative;overflow:hidden}
#results .deco-res{
  width:320px;height:320px;top:40px;left:-120px;border-radius:50%;
  border:2px solid rgba(255,255,255,.05);
}
#results .deco-res2{
  width:200px;height:200px;bottom:40px;right:-60px;border-radius:50%;
  background:rgba(255,255,255,.025);
}

@media(max-width:768px){.deco{display:none}}

/* ══════════════════════════════════════════════════════
   MID-PAGE CTA STRIP
   Full-width dark section between demo and pricing
══════════════════════════════════════════════════════ */
#midcta{
  background:var(--A);padding:var(--sp80) 0;
  position:relative;overflow:hidden;
}
.midcta-inner{
  text-align:center;position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp20);
}
.midcta-pill{
  display:inline-flex;align-items:center;gap:var(--sp8);
  background:rgba(255,255,255,.15);color:rgba(255,255,255,.85);
  font-family:var(--M);font-size:var(--t11);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  padding:var(--sp6) var(--sp16);border-radius:100px;
  border:1px solid rgba(255,255,255,.2);
}
.midcta-h{
  font-size:clamp(var(--t24),3.8vw,44px);font-weight:700;
  color:var(--white);line-height:1.22;letter-spacing:.02em;max-width:580px;
}
.midcta-h em{font-style:normal;color:rgba(255,255,255,.85)}
.midcta-sub{font-size:var(--t15);color:rgba(255,255,255,.8);max-width:440px;line-height:1.8}
.midcta-acts{display:flex;gap:var(--sp12);flex-wrap:wrap;justify-content:center;margin-top:var(--sp8)}
.midcta-note{
  font-family:var(--M);font-size:var(--t11);
  color:rgba(255,255,255,.72);letter-spacing:.06em;
  display:flex;align-items:center;gap:var(--sp8);
}
.midcta-note::before,.midcta-note::after{content:'·';opacity:.6}

/* ══════════════════════════════════════════════════════
   PRICING — 3 tier plans
   Japanese SaaS standard: ライト / スタンダード / エンタープライズ
══════════════════════════════════════════════════════ */
#pricing{background:var(--paper)}
.pricing-head{margin-bottom:var(--sp56)}
.pricing-head-sub{
  font-size:var(--t15);color:var(--ink-52);
  line-height:1.82;margin-top:var(--sp16);max-width:520px;
}
/* Toggle: monthly/annual billing (cosmetic only) */
.pricing-toggle{
  display:inline-flex;align-items:center;
  background:var(--white);border:1px solid var(--ink-16);border-radius:100px;
  padding:var(--sp4);gap:0;margin-top:var(--sp24);
}
.PrT{
  font-family:var(--M);font-size:var(--t12);letter-spacing:.06em;
  padding:var(--sp6) var(--sp16);border-radius:100px;
  cursor:pointer;transition:background .13s,color .13s;color:var(--ink-32);
}
.PrT.on{background:var(--ink);color:#fff;font-weight:500}

.pricing-g{
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp20);
  align-items:start;
}
/* Card base */
.PC{
  background:var(--white);border:1.5px solid var(--ink-16);
  border-radius:var(--r12);padding:var(--sp40) var(--sp32);
  display:flex;flex-direction:column;position:relative;
  transition:box-shadow .2s,transform .2s;
}
.PC:hover{box-shadow:var(--sh2);transform:translateY(-2px)}
/* Popular plan */
.PC--pop{
  border-color:var(--A);border-width:2px;
  box-shadow:var(--sh1);
  background:linear-gradient(180deg, rgba(var(--Argb),.03) 0%, var(--white) 40%);
  padding-top:var(--sp48);
}
.PC--pop:hover{transform:translateY(-4px)}
.PC-popular{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--A);color:#fff;
  font-family:var(--M);font-size:var(--t11);font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
  padding:5px var(--sp16);border-radius:100px;white-space:nowrap;
}
.PC-tier{
  font-family:var(--M);font-size:var(--t11);font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-32);margin-bottom:var(--sp12);display:block;
}
.PC-tier--pop{color:var(--A)}
.PC-price-row{display:flex;align-items:baseline;gap:var(--sp4);margin-bottom:var(--sp4)}
.PC-yen{font-family:var(--M);font-size:var(--t24);color:var(--ink-52);font-weight:500}
.PC-amount{
  font-family:var(--M);font-size:clamp(36px,3.5vw,48px);font-weight:500;
  color:var(--ink);letter-spacing:-.04em;line-height:1;
}
.PC-mo{font-size:var(--t15);color:var(--ink-52);margin-left:2px}
.PC-inquiry{
  font-family:var(--M);font-size:var(--t20);font-weight:500;
  color:var(--ink);letter-spacing:.02em;line-height:1;
}
.PC-desc{font-size:var(--t13);color:var(--ink-52);line-height:1.65;margin-bottom:var(--sp28)}
.PC-hr{width:100%;height:1px;background:var(--ink-08);margin-bottom:var(--sp24)}
.PC-feats{display:flex;flex-direction:column;gap:var(--sp12);flex:1;margin-bottom:var(--sp32)}
.PCF{display:flex;align-items:flex-start;gap:var(--sp10);font-size:var(--t13);color:var(--ink-52);line-height:1.5}
.PCF svg{flex-shrink:0;margin-top:2px}
.PCF-ok svg{color:var(--green)}
.PCF-na{color:var(--ink-32)}
.PCF-na svg{color:var(--ink-16)}
/* Plan CTAs */
.PC-cta-btn{
  display:flex;align-items:center;justify-content:center;gap:var(--sp8);
  width:100%;padding:14px var(--sp24);min-height:48px;
  border-radius:var(--r6);font-family:var(--F);font-size:var(--t15);
  font-weight:700;letter-spacing:.02em;border:1.5px solid;
  cursor:pointer;transition:background .13s,color .13s,border-color .13s;
  text-decoration:none;
}
.PC-cta-btn svg{flex-shrink:0;transition:transform .13s}
.PC-cta-btn:hover svg{transform:translateX(3px)}
.PC-cta-outline{background:transparent;color:var(--ink-72);border-color:var(--ink-16)}
.PC-cta-outline:hover{border-color:var(--ink);background:var(--ink-04)}
.PC-cta-primary{background:var(--A);color:#fff;border-color:var(--A)}
.PC-cta-primary:hover{background:var(--Ah);border-color:var(--Ah)}
.PC-cta-ghost{background:transparent;color:var(--ink-52);border-color:var(--ink-08)}
.PC-cta-ghost:hover{border-color:var(--ink-32);color:var(--ink)}
/* Note below grid */
.pricing-note{
  text-align:center;margin-top:var(--sp32);
  font-family:var(--M);font-size:var(--t11);color:var(--ink-32);letter-spacing:.06em;
  display:flex;align-items:center;justify-content:center;gap:var(--sp8);
}
.pricing-note svg{color:var(--green);flex-shrink:0}
@media(max-width:960px){.pricing-g{grid-template-columns:1fr;max-width:440px;margin:0 auto}}

/* ══════════════════════════════════════════════════════
   FLOW — "ご利用の流れ"
   Vertical step list + stats bar
   Left-aligned heading (consistent with all other sections)
══════════════════════════════════════════════════════ */
#flow{background:var(--white)}
.flow-head{
  display:grid;grid-template-columns:1fr auto;align-items:end;
  gap:var(--sp32);margin-bottom:var(--sp56);
}
.flow-head-sub{
  font-size:var(--t15);color:var(--ink-52);line-height:1.8;
  margin-top:var(--sp12);max-width:460px;
}
.flow-head-note{
  font-size:var(--t13);color:var(--ink-32);text-align:right;
  line-height:1.6;max-width:180px;
}

/* ── Step list: big numbered circles on left, dashed connectors ── */
.flow-list{
  display:flex;flex-direction:column;gap:0;
  margin-bottom:var(--sp56);
  position:relative;
  padding-left:72px; /* space for the big circles */
}
/* No ::before line — connectors are per-step dashed lines */

/* Big number circle — positioned to the left of the card */
.flow-num{
  position:absolute;left:-62px;top:50%;transform:translateY(-50%);
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);color:var(--A);
  border:2.5px solid var(--A);
  font-family:var(--M);font-size:var(--t17);font-weight:700;
  z-index:2;
  transition:background .2s,color .2s,box-shadow .2s;
}
.flow-step:hover .flow-num{
  background:var(--A);color:#fff;
  box-shadow:0 0 0 5px rgba(var(--Argb),.1);
}
/* Last step: filled circle */
.flow-step:last-child .flow-num{background:var(--A);color:#fff}

/* Dashed connector between steps */
.flow-step:not(:last-child)::after{
  content:'';position:absolute;
  left:-37px; /* center of circle: -62px + 52/2 - 1 */
  bottom:0;width:0;height:var(--sp16);
  transform:translateY(100%);
  border-left:2px dashed rgba(var(--Argb),.25);
  z-index:1;
}

/* Step card — extra left padding so number doesn't overlap text */
.flow-step{
  display:grid;grid-template-columns:1fr 200px;
  gap:0 var(--sp24);align-items:center;
  background:var(--paper);border:1px solid var(--ink-08);
  border-radius:var(--r12);padding:var(--sp24) var(--sp28);
  position:relative;
  margin-bottom:var(--sp16);
  transition:border-color .2s,box-shadow .2s;
}
.flow-step:last-child{margin-bottom:0}
.flow-step:hover{border-color:rgba(var(--Argb),.18);box-shadow:var(--sh1)}
.flow-title{
  font-size:var(--t17);font-weight:700;color:var(--ink);
  letter-spacing:.01em;line-height:1.3;margin-bottom:var(--sp4);
}
.flow-desc{font-size:var(--t13);color:var(--ink-52);line-height:1.75}
/* Illustration */
.flow-illus{
  display:flex;align-items:center;justify-content:center;
  transition:transform .25s;
}
.flow-step:hover .flow-illus{transform:scale(1.04)}

/* ── Stats bar ── */
.flow-stats{
  background:var(--D);border-radius:var(--r12);
  padding:var(--sp40) var(--sp48);border:1px solid var(--Dbd);
}
.flow-stats-lbl{
  font-family:var(--M);font-size:var(--t10);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.4);margin-bottom:var(--sp24);
}
.flow-stats-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:var(--sp16);margin-bottom:var(--sp28);
}
.flow-stat{
  text-align:center;padding:var(--sp24) var(--sp12);
  border-right:1px solid var(--Dbd);
}
.flow-stat:last-child{border-right:none}
.flow-stat-val{
  font-family:var(--M);font-size:clamp(var(--t28),3.5vw,var(--t40));font-weight:700;
  color:var(--Adk);letter-spacing:-.03em;line-height:1;margin-bottom:var(--sp8);
}
.flow-stat-val span{font-size:var(--t15);color:rgba(255,255,255,.45);font-weight:500;margin-left:2px}
.flow-stat-lbl{font-size:var(--t13);color:rgba(255,255,255,.55);line-height:1.4}
.flow-stats-foot{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp24);flex-wrap:wrap;
  padding-top:var(--sp24);border-top:1px solid var(--Dbd);
}
.flow-stats-note{font-size:var(--t12);color:rgba(255,255,255,.5);line-height:1.6;max-width:420px}

/* ── Flow animations ── */
/* Number circles pop in staggered */
@keyframes flowNumIn{from{transform:translateY(-50%) scale(0)}to{transform:translateY(-50%) scale(1)}}
.flow-num{transform:translateY(-50%) scale(0)}
.flow-list.in .flow-step:nth-child(1) .flow-num{animation:flowNumIn .4s .2s cubic-bezier(.34,1.56,.64,1) forwards}
.flow-list.in .flow-step:nth-child(2) .flow-num{animation:flowNumIn .4s .4s cubic-bezier(.34,1.56,.64,1) forwards}
.flow-list.in .flow-step:nth-child(3) .flow-num{animation:flowNumIn .4s .6s cubic-bezier(.34,1.56,.64,1) forwards}
.flow-list.in .flow-step:nth-child(4) .flow-num{animation:flowNumIn .4s .8s cubic-bezier(.34,1.56,.64,1) forwards}
.flow-list.in .flow-step:nth-child(5) .flow-num{animation:flowNumIn .4s 1s cubic-bezier(.34,1.56,.64,1) forwards}
/* Dashed lines fade in after their circle */
@keyframes flowDash{from{opacity:0;height:0}to{opacity:1;height:var(--sp16)}}
.flow-step::after{opacity:0;height:0}
.flow-list.in .flow-step:nth-child(1)::after{animation:flowDash .3s .5s ease forwards}
.flow-list.in .flow-step:nth-child(2)::after{animation:flowDash .3s .7s ease forwards}
.flow-list.in .flow-step:nth-child(3)::after{animation:flowDash .3s .9s ease forwards}
.flow-list.in .flow-step:nth-child(4)::after{animation:flowDash .3s 1.1s ease forwards}

/* ── Responsive ── */
@media(max-width:900px){
  .flow-head{grid-template-columns:1fr}.flow-head-note{display:none}
  .flow-list{padding-left:56px}
  .flow-num{width:42px;height:42px;font-size:var(--t15);left:-50px}
  .flow-step::after{left:-30px}
  .flow-step{grid-template-columns:1fr;gap:0;padding:var(--sp20)}
  .flow-illus{display:none}
  .flow-stats{padding:var(--sp32) var(--sp24)}
  .flow-stats-grid{grid-template-columns:repeat(2,1fr)}
  .flow-stat{border-right:none;border-bottom:1px solid var(--Dbd);padding:var(--sp20) var(--sp12)}
  .flow-stat:nth-child(n+3){border-bottom:none}
}
@media(max-width:480px){
  .flow-stats-grid{grid-template-columns:1fr 1fr}
  .flow-stats-foot{flex-direction:column;align-items:stretch;text-align:center}
  .flow-num{width:40px;height:40px;font-size:var(--t15)}
}

/* ══════════════════════════════════════════════════════
   FAQ — accordion with details/summary
   2-col sticky: heading left, accordion right
══════════════════════════════════════════════════════ */
#faq{background:var(--paper)}
.faq-g{
  display:grid;grid-template-columns:340px 1fr;
  gap:var(--sp64) var(--sp80);align-items:start;
  margin-top:var(--sp56);
}
.faq-left{position:sticky;top:calc(var(--navH) + var(--sp24))}
.faq-left-sub{font-size:var(--t15);color:var(--ink-52);line-height:1.82;margin-top:var(--sp20)}
.faq-left-cta{margin-top:var(--sp32)}
.faq-left-cta-note{
  font-size:var(--t13);color:var(--ink-32);margin-top:var(--sp12);
  display:flex;align-items:center;gap:var(--sp6);
}
.faq-left-cta-note svg{color:var(--green)}
.faq-list{display:flex;flex-direction:column;gap:var(--sp8)}
.faq-item{
  background:var(--white);border:1px solid var(--ink-16);
  border-radius:var(--r8);overflow:hidden;
  transition:border-color .15s,box-shadow .15s;
}
.faq-item[open]{border-color:rgba(var(--Argb),.4);box-shadow:0 2px 12px rgba(var(--Argb),.06)}
.faq-q{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp16);padding:var(--sp20) var(--sp24);
  font-size:var(--t15);font-weight:700;color:var(--ink);
  letter-spacing:.01em;line-height:1.4;cursor:pointer;
  list-style:none;user-select:none;
}
.faq-q::-webkit-details-marker{display:none}
.faq-q::marker{display:none}
.faq-q-icon{
  width:24px;height:24px;border-radius:50%;flex-shrink:0;
  background:var(--ink-04);display:grid;place-items:center;
  color:var(--ink-52);transition:background .14s,color .14s,transform .22s;
}
.faq-item[open] .faq-q-icon{
  background:var(--Abg);color:var(--A);transform:rotate(45deg);
}
.faq-a{
  padding:0 var(--sp24) var(--sp20);
  font-size:var(--t15);color:var(--ink-52);line-height:1.82;
  border-top:1px solid var(--ink-08);padding-top:var(--sp16);
  animation:faqa .2s ease;
}
@keyframes faqa{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
@media(max-width:900px){
  .faq-g{grid-template-columns:1fr}
  .faq-left{position:static}
}
@media(max-width:480px){.faq-q{padding:var(--sp16);font-size:var(--t13)}.faq-a{font-size:var(--t13)}}

/* ══════════════════════════════════════════════════════
   AI ROBOT — "Peek from edge" companion
   Hides behind the viewport edge, peeks in from L/R.
   Vertically centered. Hover = pulls in fully.
   Click = bounce + sparkles. Scroll = side-switch.
══════════════════════════════════════════════════════ */
#robo{
  position:fixed;z-index:90;
  top:50%;
  pointer-events:none;opacity:0;
  transition:opacity .45s;
}
#robo.on{opacity:1;pointer-events:auto}

/* ── Side: peek from left ── */
#robo.side-l{
  left:0;right:auto;
  transform:translateY(-50%) translateX(-55px);
  transition:opacity .45s,transform .6s cubic-bezier(.34,1.2,.64,1);
}
#robo.on.side-l{
  transform:translateY(-50%) translateX(-30px);
}
#robo.on.side-l:hover{
  transform:translateY(-50%) translateX(8px);
}

/* ── Side: peek from right ── */
#robo.side-r{
  right:0;left:auto;
  transform:translateY(-50%) translateX(55px);
  transition:opacity .45s,transform .6s cubic-bezier(.34,1.2,.64,1);
}
#robo.on.side-r{
  transform:translateY(-50%) translateX(30px);
}
#robo.on.side-r:hover{
  transform:translateY(-50%) translateX(-8px);
}

/* ── Switching sides: exit animation ── */
#robo.exiting.side-l{transform:translateY(-50%) translateX(-160px);opacity:0;transition:transform .35s cubic-bezier(.6,0,.7,.2),opacity .25s}
#robo.exiting.side-r{transform:translateY(-50%) translateX(160px);opacity:0;transition:transform .35s cubic-bezier(.6,0,.7,.2),opacity .25s}

/* ── Lottie container ── */
#robo .r-lottie{
  width:150px;height:150px;cursor:pointer;
  filter:drop-shadow(0 8px 24px rgba(0,0,0,.18));
  transition:filter .2s;
}
#robo .r-lottie:hover{filter:drop-shadow(0 12px 32px rgba(var(--Argb),.3))}
/* Flip when on right */
#robo.side-r .r-lottie{transform:scaleX(-1)}

/* Gentle float */
@keyframes rFloat{
  0%,100%{translate:0 0}
  33%{translate:3px -8px}
  66%{translate:-2px -5px}
}
#robo.on .r-lottie{animation:rFloat 4s ease-in-out infinite}

/* Bounce on click */
@keyframes rBounce{
  0%,100%{translate:0 0}
  20%{translate:0 -28px}
  40%{translate:0 -4px}
  60%{translate:0 -16px}
  80%{translate:0 -2px}
}
#robo .r-lottie.bounce{animation:rBounce .65s ease!important}
#robo.side-r .r-lottie.bounce{animation:rBounce .65s ease!important;transform:scaleX(-1)}

/* ── Speech bubble — appears to the INSIDE of the robot ── */
#robo .r-bub{
  position:absolute;
  background:var(--white);color:var(--ink);
  padding:12px 18px;border-radius:14px;
  box-shadow:0 6px 24px rgba(0,0,0,.13),0 0 0 1px rgba(0,0,0,.04);
  white-space:nowrap;pointer-events:none;
  opacity:0;scale:.8;
  transition:opacity .3s .1s,scale .4s .1s cubic-bezier(.34,1.56,.64,1);
}
#robo .r-bub.show{opacity:1;scale:1}
#robo .r-bub-msg{font-size:var(--t15);font-weight:700;line-height:1.4}
#robo .r-bub-sub{font-size:var(--t12);color:var(--ink-52);margin-top:2px}

/* Arrow pointing toward robot (horizontal) */
#robo .r-bub::after{
  content:'';position:absolute;top:50%;
  border-top:8px solid transparent;border-bottom:8px solid transparent;
  transform:translateY(-50%);
}
/* Left side: bubble on the RIGHT of robot, arrow points LEFT */
#robo.side-l .r-bub{
  left:calc(100% + 8px);top:50%;transform-origin:left center;
  translate:0 -50%;
}
#robo.side-l .r-bub.show{translate:0 -50%}
#robo.side-l .r-bub::after{
  left:-7px;border-right:8px solid var(--white);
}
/* Right side: bubble on the LEFT of robot, arrow points RIGHT */
#robo.side-r .r-bub{
  right:calc(100% + 8px);top:50%;transform-origin:right center;
  translate:0 -50%;
}
#robo.side-r .r-bub.show{translate:0 -50%}
#robo.side-r .r-bub::after{
  right:-7px;border-left:8px solid var(--white);
}



/* ── Hide on smaller screens ── */
@media(max-width:960px){#robo{display:none}}
@media(prefers-reduced-motion:reduce){
  #robo{transition:opacity .2s}
  #robo.on .r-lottie{animation:none}
  #robo .r-lottie.bounce{animation:none!important}
}

/* ══════════════════════════════════════════════════════
   PAGE LOAD — preloader overlay + content reveal
══════════════════════════════════════════════════════ */
.preloader{
  position:fixed;inset:0;z-index:9999;
  background:var(--A);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:var(--sp16);
  transition:opacity .4s,visibility .4s;
}
.preloader.done{opacity:0;visibility:hidden;pointer-events:none}
.preloader-logo{
  font-size:28px;font-weight:700;color:#fff;
  display:flex;align-items:baseline;gap:var(--sp8);
  opacity:0;transform:translateY(10px);
  animation:plFadeUp .5s .1s ease forwards;
}
.preloader-logo-ai{
  font-family:var(--M);font-size:14px;font-weight:700;letter-spacing:.08em;
  color:rgba(255,255,255,.7);background:rgba(255,255,255,.15);
  padding:3px 10px;border-radius:var(--r4);
}
.preloader-bar{
  width:120px;height:3px;background:rgba(255,255,255,.2);
  border-radius:2px;overflow:hidden;
  opacity:0;animation:plFadeUp .4s .3s ease forwards;
}
.preloader-fill{
  width:0;height:100%;background:#fff;border-radius:2px;
  animation:plFill .8s .5s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes plFadeUp{to{opacity:1;transform:none}}
@keyframes plFill{to{width:100%}}
/* Content starts hidden until preloader finishes */
/* Preloader covers everything — body is always visible */

/* ══════════════════════════════════════════════════════
   STICKY CTA BAR — both SP and PC
══════════════════════════════════════════════════════ */
.sticky-cta{
  position:fixed;bottom:0;right:0;z-index:95;
  transform:translateY(110%);transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta-card{
  background:var(--A);color:#fff;
  border-radius:var(--r12) var(--r12) 0 0;
  padding:var(--sp16) var(--sp24);
  box-shadow:0 -4px 24px rgba(0,0,0,.15);
  display:flex;align-items:center;gap:var(--sp16);
  position:relative;
}
.sticky-cta-close{
  position:absolute;top:var(--sp8);right:var(--sp10);
  width:24px;height:24px;display:grid;place-items:center;
  color:rgba(255,255,255,.5);cursor:pointer;border:none;background:none;
  transition:color .13s;border-radius:50%;
}
.sticky-cta-close:hover{color:#fff}
.sticky-cta-label{
  font-family:var(--M);font-size:var(--t10);letter-spacing:.08em;
  text-transform:uppercase;color:rgba(255,255,255,.6);display:block;margin-bottom:var(--sp4);
}
.sticky-cta-title{font-size:var(--t17);font-weight:700;line-height:1.3}
.sticky-cta-acts{display:flex;gap:var(--sp10);flex-shrink:0}
.sticky-cta-acts .Btn{min-height:44px;font-size:var(--t13);padding:0 var(--sp20)}
@media(max-width:768px){
  .sticky-cta{left:0}
  .sticky-cta-card{flex-direction:column;align-items:stretch;text-align:center;padding:var(--sp14) var(--sp16);gap:var(--sp10)}
  .sticky-cta-acts{justify-content:center}
  .sticky-cta-text{display:none}
}

/* ══════════════════════════════════════════════════════
   BACK TO TOP BUTTON
══════════════════════════════════════════════════════ */
.btt{
  position:fixed;bottom:24px;right:24px;z-index:85;
  width:44px;height:44px;border-radius:50%;
  background:var(--white);border:1px solid var(--ink-08);
  box-shadow:var(--sh1);
  display:grid;place-items:center;
  color:var(--ink-52);cursor:pointer;
  opacity:0;transform:translateY(12px);pointer-events:none;
  transition:opacity .25s,transform .25s,background .13s,color .13s;
}
.btt.show{opacity:1;transform:none;pointer-events:auto}
.btt:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:768px){.btt{bottom:72px;right:16px;width:40px;height:40px}}

/* ══════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
══════════════════════════════════════════════════════ */
.cookie-bar{
  position:fixed;bottom:0;left:0;right:0;z-index:200;
  background:var(--D);border-top:1px solid var(--Dbd);
  padding:var(--sp16) var(--sp24);
  display:flex;align-items:center;justify-content:center;gap:var(--sp24);
  flex-wrap:wrap;
  transform:translateY(100%);transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.cookie-bar.show{transform:translateY(0)}
.cookie-bar-text{font-size:var(--t13);color:rgba(255,255,255,.7);line-height:1.6;max-width:600px}
.cookie-bar-text a{color:var(--Adk);text-decoration:underline;text-underline-offset:2px}
.cookie-bar-actions{display:flex;gap:var(--sp10);flex-shrink:0}
.cookie-bar-btn{
  font-family:var(--F);font-size:var(--t13);font-weight:700;
  padding:var(--sp8) var(--sp20);border-radius:var(--r4);
  cursor:pointer;transition:background .13s;border:none;
}
.cookie-bar-accept{background:var(--A);color:#fff}
.cookie-bar-accept:hover{background:var(--Ah)}
.cookie-bar-decline{background:transparent;color:rgba(255,255,255,.55);border:1px solid var(--Dbd)}
.cookie-bar-decline:hover{border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.8)}