/* myClover Session — editorial technology, vanilla and self-contained */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #f7f3ea; }
button, input, textarea { font: inherit; }
button { color: inherit; }

.session-root {
  --ivory: #f7f3ea;
  --cream: #fcfaf5;
  --ivory-deep: #ece5d8;
  --ink: #19221d;
  --ink-soft: #5f675f;
  --midnight: #07131f;
  --green: #287354;
  --blue: #4f8cff;
  --gold: #c8a85d;
  --accent: var(--green);
  --accent-rgb: 40, 115, 84;
  --hairline: rgba(25, 34, 29, .13);
  min-height: 100vh;
  overflow: clip;
  background: var(--ivory);
  color: var(--ink);
  font-family: "IBM Plex Sans Thai", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.session-root[data-intent="opportunity"] { --accent: var(--blue); --accent-rgb: 79, 140, 255; }
.session-root[data-intent="curious"] { --accent: var(--gold); --accent-rgb: 200, 168, 93; }
.display { margin: 0; font-family: "Anuphan", "IBM Plex Sans Thai", system-ui, sans-serif; font-weight: 600; letter-spacing: -.035em; line-height: 1.08; }
.eyebrow { margin: 0; color: var(--ink-soft); font-family: "Anuphan", sans-serif; font-size: .68rem; font-weight: 600; letter-spacing: .3em; line-height: 1.5; text-transform: uppercase; }
.eyebrow-light { color: rgba(255,255,255,.55); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
[hidden] { display: none !important; }

.button {
  display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .6rem;
  border: 0; border-radius: 999px; padding: .2rem 1.25rem; cursor: pointer;
  font-weight: 600; text-decoration: none; transition: transform .25s cubic-bezier(.2,.9,.2,1), background .25s, border-color .25s, box-shadow .25s, opacity .25s;
}
.button:hover { transform: translateY(-2px); }
.button:active { transform: translateY(0) scale(.985); }
.button:focus-visible, .session-root :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.button:disabled { cursor: not-allowed; opacity: .48; transform: none; }
.button-primary { position: relative; min-height: 56px; padding-inline: 1.6rem; overflow: hidden; background: var(--ink); color: var(--cream); box-shadow: 0 18px 46px -20px rgba(7,19,31,.72); }
.button-primary::before { content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.18); }
.button-primary:hover { box-shadow: 0 22px 54px -20px rgba(7,19,31,.78); }
.button-primary.is-sending::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.25) 48%, transparent 75%); transform: translateX(-110%); animation: sending-sweep 1.1s linear infinite; }
.button-quiet { min-height: 46px; border: 1px solid var(--hairline); background: rgba(252,250,245,.62); color: var(--ink-soft); backdrop-filter: blur(12px); }
.button-quiet:hover { background: var(--cream); color: var(--ink); }
.button-icon { width: 48px; padding: 0; border: 1px solid var(--hairline); background: rgba(255,255,255,.5); color: var(--ink-soft); font-size: 1.45rem; font-weight: 400; }

/* Header */
.session-header { position: fixed; inset: 0 0 auto; z-index: 80; display: flex; height: 72px; align-items: center; justify-content: space-between; padding: .75rem 1rem; background: linear-gradient(180deg, rgba(247,243,234,.96), rgba(247,243,234,.72) 70%, transparent); backdrop-filter: blur(12px); }
.brand-lockup { display: flex; align-items: baseline; gap: .55rem; color: var(--ink); text-decoration: none; }
.brand-name { font-size: 1.02rem; }
.brand-session { color: var(--ink-soft); font-size: .58rem; font-weight: 600; letter-spacing: .26em; }

/* Hero */
.hero { position: relative; min-height: 100svh; overflow: hidden; background: var(--ivory); }
.hero-atmosphere { position: absolute; inset: 0; background: radial-gradient(80% 70% at 15% 20%, rgba(255,255,255,.9), transparent 70%), linear-gradient(155deg, var(--cream), var(--ivory-deep)); }
.orb { position: absolute; width: 42vw; height: 42vw; border-radius: 50%; filter: blur(70px); opacity: .18; transform: translate3d(var(--px,0),var(--py,0),0); transition: transform 1s cubic-bezier(.2,.9,.2,1); }
.orb-a { top: 8%; right: 8%; background: var(--blue); }
.orb-b { bottom: 2%; left: 1%; background: var(--green); }
.hero-traces { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .75; }
.trace { fill: none; stroke-width: 1.25; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: trace-arrive 2.1s .2s cubic-bezier(.2,.9,.2,1) forwards; }
.trace-system { stroke: rgba(79,140,255,.55); }
.trace-life { stroke: rgba(40,115,84,.52); animation-delay: .38s; }
.trace-clover { stroke: rgba(200,168,93,.72); stroke-width: 1.1; opacity: 0; transform-origin: center; animation: clover-arrive .7s 1.75s cubic-bezier(.2,.9,.2,1) forwards; }
.hero-photo { position: absolute; z-index: 3; inset: auto 0 0; height: 43svh; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 7%; filter: saturate(.96) contrast(1.02); animation: photo-arrive 1.3s cubic-bezier(.2,.9,.2,1) both; }
.hero-photo-fade { position: absolute; inset: 0; background: linear-gradient(180deg, var(--ivory) 0%, transparent 27%, transparent 78%, rgba(247,243,234,.5)); }
.hero-copy { position: relative; z-index: 10; display: flex; min-height: 100svh; flex-direction: column; justify-content: flex-start; padding: 6.2rem 1.25rem 44svh; }
.hero h1 { margin-top: 1rem; font-size: clamp(3rem, 14vw, 5.8rem); }
.hero-promise { margin-top: .65rem; max-width: 31rem; color: var(--ink-soft); font-size: clamp(1.35rem, 6vw, 2.35rem); font-weight: 500; line-height: 1.22; }
.hero-proof { display: grid; gap: .35rem; margin-top: 1.4rem; max-width: 32rem; }
.hero-proof p { margin: 0; font-size: .9rem; line-height: 1.55; }
.hero-proof strong { color: var(--accent); }
.hero-value { max-width: 30rem; margin: 1rem 0 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.6; }
.hero-actions { margin-top: 1.35rem; }
.practical { margin: .8rem 0 0; color: var(--ink-soft); font-size: .71rem; line-height: 1.6; }
.reveal-up { animation: reveal-up .85s cubic-bezier(.2,.9,.2,1) both; }
.delay-1 { animation-delay: .08s; }.delay-2 { animation-delay: .16s; }.delay-3 { animation-delay: .24s; }.delay-4 { animation-delay: .32s; }.delay-5 { animation-delay: .4s; }

/* Shared sections */
.section { width: min(100%, 62rem); margin: 0 auto; padding: 6rem 1.25rem; }
.section-wide { width: min(calc(100% - 1.5rem), 74rem); margin: 0 auto; }
.section-heading { max-width: 42rem; }
.section-heading h2 { margin-top: .8rem; font-size: clamp(2rem, 8vw, 4.25rem); }
.section-heading > p:last-child { max-width: 34rem; margin: 1rem 0 0; color: var(--ink-soft); line-height: 1.65; }

/* Intent */
.intent-section { scroll-margin-top: 5rem; }
.intent-grid { display: grid; gap: .75rem; margin-top: 2.25rem; }
.intent-card { position: relative; display: grid; grid-template-columns: auto minmax(0,1fr) auto; min-height: 92px; align-items: center; gap: 1rem; width: 100%; overflow: hidden; padding: 1rem 1.1rem; border: 1px solid var(--hairline); border-radius: 24px; background: rgba(252,250,245,.68); text-align: left; cursor: pointer; transition: transform .28s cubic-bezier(.2,.9,.2,1), background .28s, border-color .28s, box-shadow .28s; }
.intent-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--card-accent); transform: scaleY(0); transition: transform .35s cubic-bezier(.2,.9,.2,1); }
.intent-card:hover { transform: translateY(-2px); background: var(--cream); }
.intent-card[aria-pressed="true"] { border-color: color-mix(in srgb, var(--card-accent) 50%, transparent); background: var(--cream); box-shadow: 0 22px 50px -34px var(--card-accent); }
.intent-card[aria-pressed="true"]::before { transform: scaleY(1); }
.intent-icon { position: relative; display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid color-mix(in srgb, var(--card-accent) 45%, transparent); border-radius: 50%; color: var(--card-accent); }
.intent-icon svg { width: 22px; height: 22px; }
.intent-icon path, .intent-icon circle { stroke: currentColor; stroke-width: 1.3; }
.intent-copy strong { display: block; font-family: "Anuphan", sans-serif; font-size: 1.18rem; letter-spacing: -.02em; }
.intent-copy small { display: block; margin-top: .25rem; color: var(--ink-soft); font-size: .78rem; }
.intent-arrow { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--hairline); border-radius: 50%; color: var(--ink-soft); transition: transform .28s, color .28s; }
.intent-card[aria-pressed="true"] .intent-arrow { transform: rotate(45deg); color: var(--card-accent); }
.value-panel { min-height: 5rem; margin-top: 1rem; }
.value-empty { margin: 0; padding: 2rem 0; color: var(--ink-soft); text-align: center; font-size: .85rem; }
.value-shell { position: relative; overflow: hidden; padding: 1.6rem; border: 1px solid rgba(var(--accent-rgb),.28); border-radius: 28px; background: linear-gradient(145deg, rgba(255,255,255,.78), rgba(252,250,245,.48)); box-shadow: 0 30px 70px -54px rgba(var(--accent-rgb),.9); animation: panel-compose .46s cubic-bezier(.2,.9,.2,1) both; }
.value-shell::after { content: ""; position: absolute; inset: -40% -15% auto auto; width: 18rem; height: 18rem; border-radius: 50%; background: rgba(var(--accent-rgb),.08); filter: blur(24px); pointer-events: none; }
.value-kicker { position: relative; z-index: 2; color: var(--accent); font-size: .65rem; font-weight: 600; letter-spacing: .25em; }
.value-shell h3 { position: relative; z-index: 2; margin-top: .7rem; font-size: clamp(1.7rem, 7vw, 2.8rem); }
.outcome-title { position: relative; z-index: 2; margin: 1.5rem 0 .6rem; color: var(--ink-soft); font-size: .8rem; }
.outcome-list { position: relative; z-index: 2; display: grid; gap: .85rem; margin: 0; padding: 0; list-style: none; counter-reset: outcome; }
.outcome-list li { display: grid; grid-template-columns: 2rem minmax(0,1fr); gap: .65rem; align-items: start; line-height: 1.55; }
.outcome-list li::before { counter-increment: outcome; content: "0" counter(outcome); color: var(--accent); font-size: .65rem; font-weight: 600; letter-spacing: .1em; padding-top: .3rem; }
.value-qualifier { position: relative; z-index: 2; margin: 1.4rem 0 0; padding-top: 1rem; border-top: 1px solid var(--hairline); color: var(--ink-soft); font-size: .83rem; line-height: 1.65; }
.value-cta { position: relative; z-index: 2; margin-top: 1.35rem; width: 100%; }

/* Duo */
.duo-section { position: relative; overflow: hidden; border-radius: 34px; padding: 4.5rem 1.25rem; background: radial-gradient(70% 60% at 50% 40%, rgba(79,140,255,.13), transparent 70%), var(--midnight); color: white; }
.duo-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .16; background-image: radial-gradient(rgba(255,255,255,.5) .5px, transparent .6px); background-size: 4px 4px; }
.duo-intro { position: relative; z-index: 2; max-width: 45rem; margin: 0 auto 2.5rem; text-align: center; }
.duo-intro h2 { margin-top: .8rem; font-size: clamp(2.25rem, 9vw, 5rem); }
.duo-stage { position: relative; z-index: 2; display: grid; gap: 1rem; max-width: 66rem; margin: 0 auto; }
.person { display: grid; grid-template-columns: 42% minmax(0,1fr); gap: 1rem; min-height: 18rem; align-items: end; margin: 0; padding: .75rem; border: 1px solid rgba(255,255,255,.11); border-radius: 27px; background: rgba(255,255,255,.045); }
.person-image { height: 100%; min-height: 16rem; overflow: hidden; border-radius: 21px; }
.person-image img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.25) translate3d(var(--card-x,0),var(--card-y,0),0); filter: saturate(.9) contrast(1.04); transition: transform 1s cubic-bezier(.2,.9,.2,1); }
.person-teem img { object-position: 50% 8%; }
.person-ako img { object-position: 50% 8%; }
.person-copy { padding: .75rem .35rem .75rem 0; }
.person-label { margin: 0; color: rgba(255,255,255,.5); font-size: .58rem; font-weight: 600; letter-spacing: .17em; }
.person-copy h3 { margin-top: .55rem; font-size: 2rem; }
.person-statement { margin: .55rem 0 0; color: white !important; font-family: "Anuphan", sans-serif; font-size: 1rem !important; font-weight: 500; line-height: 1.45 !important; }
.person-copy > p:last-child { margin: .85rem 0 0; color: rgba(255,255,255,.6); font-size: .78rem; line-height: 1.65; }
.you-node { position: relative; display: grid; place-items: center; min-height: 8rem; text-align: center; }
.you-node svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.duo-line { stroke: rgba(255,255,255,.35); stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 1; }
.you-node svg circle { fill: var(--gold); opacity: .85; }
.you-node strong { position: relative; z-index: 2; margin-top: .4rem; color: var(--gold); font-size: 1.5rem; letter-spacing: .14em; }
.you-node span { position: relative; z-index: 2; color: rgba(255,255,255,.55); font-size: .7rem; }
.duo-stage.is-visible .duo-line { animation: line-connect .9s cubic-bezier(.2,.9,.2,1) forwards; }
.duo-stage.is-visible .duo-line-right { animation-delay: .12s; }
.duo-stage.is-visible .you-node strong { animation: you-pulse .55s 1s cubic-bezier(.2,.9,.2,1) both; }
.duo-conclusion { position: relative; z-index: 2; max-width: 42rem; margin: 3rem auto 0; text-align: center; font-size: clamp(1.4rem, 5vw, 2.45rem); line-height: 1.35; }

/* Method */
.method-section { position: relative; }
.method-list { display: grid; gap: .5rem; margin: 2.5rem 0 0; padding: 0; list-style: none; }
.method-step { position: relative; min-height: 9rem; padding: 1.3rem 1rem 1.3rem 3.6rem; border-top: 1px solid var(--hairline); opacity: .42; transform: translateY(12px); transition: opacity .55s, transform .55s cubic-bezier(.2,.9,.2,1); }
.method-step.is-visible { opacity: 1; transform: translateY(0); }
.method-number { position: absolute; top: 1.45rem; left: .2rem; color: var(--accent); font-size: .68rem; font-weight: 600; letter-spacing: .15em; }
.method-en { margin: 0; color: var(--ink-soft); font-size: .6rem; font-weight: 600; letter-spacing: .25em; }
.method-step h3 { margin-top: .5rem; font-size: clamp(1.25rem, 5vw, 1.85rem); }
.method-line { position: absolute; top: 16rem; bottom: 12rem; left: 2.65rem; width: 1px; background: var(--hairline); }
.method-line span { display: block; width: 100%; height: var(--method-progress,0%); background: var(--accent); transition: height .5s ease-out; }
.method-note { margin: 1.5rem 0 0; padding: 1.2rem; border: 1px solid var(--hairline); border-radius: 20px; color: var(--ink-soft); font-size: .8rem; line-height: 1.65; text-align: center; }

/* Closed Folder */
.closed-folder { display: grid; width: min(calc(100% - 1.5rem), 70rem); gap: 2rem; align-items: center; margin: 0 auto 2rem; overflow: hidden; border-radius: 34px; padding: 3.25rem 1.25rem; background: radial-gradient(80% 80% at 20% 50%, rgba(79,140,255,.18), transparent), var(--midnight); color: white; animation: folder-enter .7s cubic-bezier(.2,.9,.2,1) both; }
.folder-visual { position: relative; width: min(80vw, 22rem); aspect-ratio: 4/5; margin: 0 auto; perspective: 900px; transform: translate3d(calc(var(--folder-x,0) * 1px),calc(var(--folder-y,0) * 1px),0); transition: transform .8s cubic-bezier(.2,.9,.2,1); }
.folder-tab { position: absolute; top: 0; left: 1.2rem; z-index: 1; width: 45%; height: 2.4rem; padding: .65rem 1rem; border-radius: 10px 10px 0 0; background: #102a4b; color: rgba(255,255,255,.65); font-size: .6rem; letter-spacing: .18em; }
.folder-cover { position: absolute; inset: 2.25rem 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid rgba(116,166,255,.35); border-radius: 12px; background: linear-gradient(145deg,#0a1d32,#06101c); box-shadow: 24px 34px 70px -34px rgba(79,140,255,.55); transform: rotateY(-6deg) rotateX(2deg); }
.folder-cover::after { content: ""; position: absolute; top: 0; bottom: 0; left: -30%; width: 22%; background: linear-gradient(90deg,transparent,rgba(105,164,255,.28),transparent); transform: skewX(-14deg); animation: folder-glint 5s 1s ease-in-out infinite; }
.folder-cover span { color: rgba(255,255,255,.42); font-size: .54rem; letter-spacing: .24em; }
.folder-cover strong { margin-top: 1rem; color: transparent; font-size: 8rem; -webkit-text-stroke: 1px rgba(102,159,255,.65); text-shadow: 0 0 34px rgba(79,140,255,.26); }
.folder-cover i { width: 2.2rem; height: 2px; margin-top: .75rem; background: var(--blue); box-shadow: 0 0 18px var(--blue); }
.folder-copy { max-width: 35rem; }
.folder-copy h2 { margin-top: .8rem; font-size: clamp(2rem, 8vw, 4.2rem); }
.folder-lead { color: #8db5ff !important; font-family: "Anuphan", sans-serif; font-size: 1.15rem !important; font-weight: 500; }
.folder-copy > p { color: rgba(255,255,255,.64); line-height: 1.75; }
.folder-copy small { display: block; margin-top: 1.25rem; color: rgba(255,255,255,.36); font-size: .7rem; line-height: 1.65; }

/* Honest */
.accordion { margin-top: 2.25rem; border-top: 1px solid var(--hairline); }
.accordion details { border-bottom: 1px solid var(--hairline); }
.accordion summary { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 76px; align-items: center; gap: 1rem; cursor: pointer; list-style: none; font-family: "Anuphan", sans-serif; font-size: clamp(1rem,4vw,1.25rem); font-weight: 500; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary span { display: grid; width: 34px; height: 34px; place-items: center; border: 1px solid var(--hairline); border-radius: 50%; color: var(--ink-soft); transition: transform .28s, border-color .28s; }
.accordion details[open] summary span { transform: rotate(45deg); border-color: rgba(var(--accent-rgb),.4); color: var(--accent); }
.accordion details p { max-width: 46rem; margin: -.15rem 0 1.5rem; color: var(--ink-soft); line-height: 1.8; animation: accordion-open .3s cubic-bezier(.2,.9,.2,1) both; }

/* Promise */
.promise-section { width: min(calc(100% - 1.5rem), 62rem); margin: 0 auto 1rem; border: 1px solid var(--hairline); border-radius: 34px; padding: 5rem 1.25rem; background: radial-gradient(60% 80% at 50% 0%, rgba(200,168,93,.14), transparent), var(--cream); text-align: center; }
.promise-clover { position: relative; width: 62px; height: 62px; margin: 0 auto 1.5rem; opacity: .7; }
.promise-clover span { position: absolute; width: 30px; height: 30px; border: 1px solid var(--gold); border-radius: 50%; }
.promise-clover span:nth-child(1) { top: 1px; left: 16px; }.promise-clover span:nth-child(2) { top: 16px; left: 1px; }.promise-clover span:nth-child(3) { top: 16px; right: 1px; }.promise-clover span:nth-child(4) { bottom: 1px; left: 16px; }
.promise-section h2 { margin-top: .9rem; font-size: clamp(2.6rem, 11vw, 5.5rem); }
.promise-section > p:not(.eyebrow) { max-width: 37rem; margin: 1.25rem auto 0; color: var(--ink-soft); line-height: 1.75; }
.promise-section .button { margin-top: 2rem; }
.site-footer { padding: 3rem 1.25rem 8rem; color: var(--ink-soft); text-align: center; }
.site-footer p { margin: .3rem 0; font-size: .75rem; }
.site-footer .display { color: var(--ink); font-size: 1.1rem; }

/* Sticky mobile booking */
.sticky-book { position: fixed; z-index: 70; inset: auto 0 0; padding: 2rem 1rem max(1rem,env(safe-area-inset-bottom)); background: linear-gradient(180deg,transparent,var(--ivory) 45%); pointer-events: none; opacity: 0; transform: translateY(16px); transition: opacity .3s, transform .3s cubic-bezier(.2,.9,.2,1); }
.sticky-book.is-visible { opacity: 1; transform: translateY(0); }
.sticky-book .button { width: 100%; pointer-events: auto; }
.sticky-book:not(.is-visible) .button { pointer-events: none; }

/* Conversational booking */
.booking-root { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; }
.booking-scrim { position: absolute; inset: 0; border: 0; background: rgba(7,19,31,.48); backdrop-filter: blur(8px); animation: scrim-in .22s ease-out both; }
.booking-dialog { position: relative; display: flex; width: 100%; max-height: 94svh; flex-direction: column; overflow: hidden; border: 1px solid rgba(var(--accent-rgb),.25); border-radius: 30px 30px 0 0; background: var(--cream); box-shadow: 0 30px 100px -35px rgba(7,19,31,.7); animation: dialog-arrive .42s cubic-bezier(.2,.9,.2,1) both; }
.booking-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.15rem 1.2rem .85rem; }
.booking-kicker { margin: 0; color: var(--accent); font-size: .56rem; font-weight: 700; letter-spacing: .28em; }
.booking-header h2 { margin-top: .08rem; font-size: 1.42rem; }
.booking-header div > p:last-child { margin: .3rem 0 0; color: var(--ink-soft); font-size: .72rem; }
.conversation-progress { position: relative; display: flex; gap: .35rem; padding: 0 1.2rem 1rem; }
.conversation-progress::before { content: ""; position: absolute; top: 4px; right: 1.2rem; left: 1.2rem; height: 1px; background: var(--hairline); }
.conversation-progress span { position: relative; z-index: 2; width: 8px; height: 8px; border: 1px solid var(--hairline); border-radius: 50%; background: var(--cream); transition: flex .4s cubic-bezier(.2,.9,.2,1), background .35s, border-color .35s, box-shadow .35s; }
.conversation-progress span.is-done { background: var(--accent); border-color: var(--accent); }
.conversation-progress span.is-current { flex: 1; border-radius: 999px; background: linear-gradient(90deg,var(--accent),rgba(var(--accent-rgb),.18)); border-color: transparent; box-shadow: 0 0 18px rgba(var(--accent-rgb),.2); }
.conversation { min-height: 22rem; flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: .85rem 1.2rem 1.5rem; scroll-behavior: smooth; }
.thread { display: flex; flex-direction: column; gap: .75rem; max-width: 34rem; margin: 0 auto; }
.message { max-width: 88%; animation: message-compose .38s cubic-bezier(.2,.9,.2,1) both; }
.message-guide { align-self: flex-start; }
.message-guide .message-label { display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; color: var(--accent); font-size: .58rem; font-weight: 600; letter-spacing: .15em; }
.guide-mark { display: grid; width: 22px; height: 22px; place-items: center; border: 1px solid rgba(var(--accent-rgb),.35); border-radius: 50%; }
.message-guide .message-body { padding: .95rem 1rem; border: 1px solid var(--hairline); border-radius: 8px 22px 22px 22px; background: rgba(255,255,255,.62); line-height: 1.65; }
.message-guide .message-body p { margin: 0; }.message-guide .message-body p + p { margin-top: .55rem; }
.message-visitor { align-self: flex-end; padding: .7rem 1rem; border-radius: 20px 8px 20px 20px; background: rgba(var(--accent-rgb),.12); color: color-mix(in srgb,var(--accent) 70%,var(--ink)); font-weight: 500; }
.preparing { display: inline-flex; align-self: flex-start; align-items: center; gap: .28rem; min-height: 38px; padding: .55rem .8rem; color: var(--ink-soft); font-size: .68rem; }
.preparing-dots { position: relative; display: inline-flex; gap: .22rem; width: 32px; }
.preparing-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); animation: preparing-dot .75s ease-in-out infinite alternate; }
.preparing-dots i:nth-child(2) { animation-delay: .14s; }.preparing-dots i:nth-child(3) { animation-delay: .28s; }
.choice-set { display: grid; gap: .55rem; margin-top: .25rem; animation: choices-arrive .35s .08s cubic-bezier(.2,.9,.2,1) both; }
.choice { display: grid; grid-template-columns: minmax(0,1fr) auto; min-height: 52px; align-items: center; gap: .75rem; width: 100%; padding: .7rem .9rem; border: 1px solid var(--hairline); border-radius: 18px; background: rgba(255,255,255,.52); text-align: left; cursor: pointer; transition: transform .22s cubic-bezier(.2,.9,.2,1), border-color .22s, background .22s; }
.choice:hover { transform: translateY(-1px); border-color: rgba(var(--accent-rgb),.4); background: white; }
.choice span { font-weight: 500; }.choice small { display: block; margin-top: .15rem; color: var(--ink-soft); font-size: .7rem; font-weight: 400; }.choice b { color: var(--accent); font-size: .8rem; }
.choice-set.date-set { grid-template-columns: repeat(2,minmax(0,1fr)); }
.date-choice { display: block; min-height: 74px; text-align: center; }
.date-choice span { display: block; color: var(--accent); font-size: .61rem; letter-spacing: .14em; }.date-choice strong { display: block; margin-top: .2rem; font-size: 1.15rem; }.date-choice small { display: block; margin-top: .05rem; }
.form-card { padding: 1rem; border: 1px solid var(--hairline); border-radius: 22px; background: rgba(255,255,255,.45); }
.field-label { display: block; margin-top: .95rem; color: var(--ink-soft); font-size: .76rem; }.field-label:first-child { margin-top: 0; }
.field { width: 100%; min-height: 52px; margin-top: .4rem; border: 1px solid var(--hairline); border-radius: 15px; background: rgba(255,255,255,.78); padding: .8rem .9rem; color: var(--ink); outline: none; }
.field:focus { border-color: rgba(var(--accent-rgb),.55); box-shadow: 0 0 0 4px rgba(var(--accent-rgb),.1); }
textarea.field { min-height: 88px; resize: vertical; }.field-meta { display: flex; justify-content: flex-end; margin-top: .25rem; color: var(--ink-soft); font-size: .65rem; }
.review-card { overflow: hidden; border: 1px solid var(--hairline); border-radius: 24px; background: rgba(255,255,255,.55); }
.review-title { padding: 1rem; border-bottom: 1px solid var(--hairline); color: var(--accent); font-size: .63rem; font-weight: 600; letter-spacing: .18em; }
.review-row { display: grid; grid-template-columns: 5rem minmax(0,1fr) auto; gap: .6rem; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--hairline); }
.review-row > span { color: var(--ink-soft); font-size: .7rem; }.review-row strong { font-size: .83rem; }.edit-answer { border: 0; background: none; color: var(--accent); cursor: pointer; font-size: .7rem; }
.consent { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .65rem; align-items: start; margin-top: 1rem; color: var(--ink-soft); font-size: .7rem; line-height: 1.55; cursor: pointer; }.consent input { width: 18px; height: 18px; accent-color: var(--accent); }
.booking-error { margin: .8rem 0 0; padding: .7rem .8rem; border-left: 2px solid #b85c4e; background: rgba(184,92,78,.07); color: #844439; font-size: .72rem; line-height: 1.5; }
.booking-footer { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .7rem; border-top: 1px solid var(--hairline); padding: .85rem 1.2rem max(.9rem,env(safe-area-inset-bottom)); background: rgba(252,250,245,.9); backdrop-filter: blur(14px); }
.booking-footer .button-primary { width: 100%; }
.success { padding: 1.2rem 0; text-align: center; }
.success-clover { position: relative; width: 70px; height: 70px; margin: 0 auto 1.2rem; animation: success-pop .8s cubic-bezier(.2,.9,.2,1) both; }
.success-clover span { position: absolute; width: 34px; height: 34px; border: 1px solid var(--accent); border-radius: 50%; background: rgba(var(--accent-rgb),.06); }
.success-clover span:nth-child(1) { top: 1px; left: 18px; }.success-clover span:nth-child(2) { top: 18px; left: 1px; }.success-clover span:nth-child(3) { top: 18px; right: 1px; }.success-clover span:nth-child(4) { bottom: 1px; left: 18px; }
.success h3 { font-size: 1.75rem; }.success > p { margin: .6rem auto 1rem; color: var(--ink-soft); font-size: .85rem; }.success .review-card { text-align: left; }
.exit-confirm { padding: 1rem; border: 1px solid rgba(184,92,78,.18); border-radius: 22px; background: rgba(255,255,255,.55); text-align: center; }.exit-confirm p { margin: 0 0 1rem; color: var(--ink-soft); }.exit-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }

/* Keyframes */
@keyframes trace-arrive { to { stroke-dashoffset: 0; } }
@keyframes clover-arrive { from { opacity: 0; transform: scale(.65) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes photo-arrive { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes reveal-up { from { opacity: 0; transform: translateY(18px); filter: blur(5px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes panel-compose { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes line-connect { to { stroke-dashoffset: 0; } }
@keyframes you-pulse { 0% { transform: scale(.96); opacity: .4; } 65% { transform: scale(1.05); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes folder-enter { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes folder-glint { 0%,70% { transform: translateX(-180%) skewX(-14deg); } 100% { transform: translateX(650%) skewX(-14deg); } }
@keyframes accordion-open { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dialog-arrive { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes message-compose { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes choices-arrive { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes preparing-dot { from { opacity: .25; transform: translateY(2px); } to { opacity: 1; transform: translateY(-2px); } }
@keyframes success-pop { from { opacity: 0; transform: scale(.7) rotate(-18deg); } 65% { transform: scale(1.06) rotate(2deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes sending-sweep { to { transform: translateX(110%); } }

/* Responsive */
@media (min-width: 640px) {
  .session-header { padding-inline: 2rem; }
  .hero-copy, .section { padding-inline: 2rem; }
  .value-shell { padding: 2rem; }
  .intent-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .intent-card { grid-template-columns: auto minmax(0,1fr); align-content: center; }
  .intent-arrow { display: none; }
  .duo-section, .closed-folder, .promise-section { padding-inline: 2.5rem; }
  .choice-set.date-set { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (min-width: 768px) {
  .sticky-book { display: none; }
  .site-footer { padding-bottom: 3rem; }
  .booking-root { align-items: center; padding: 1.5rem; }
  .booking-dialog { width: min(100%,610px); max-height: 88svh; border-radius: 30px; }
  .booking-header { padding: 1.35rem 1.5rem .95rem; }
  .conversation-progress { padding-inline: 1.5rem; }
  .conversation-progress::before { right: 1.5rem; left: 1.5rem; }
  .conversation { padding: 1rem 1.5rem 1.5rem; }
  .booking-footer { padding-inline: 1.5rem; }
  .message { max-width: 82%; }
}

@media (min-width: 900px) {
  .hero-photo { inset: 0 0 0 48%; height: auto; }
  .hero-photo img { object-position: 50% 18%; transform: translate3d(calc(var(--photo-x,0) * 1px),calc(var(--photo-y,0) * 1px),0) scale(1.02); }
  .hero-photo-fade { background: linear-gradient(90deg,var(--ivory) 0%,transparent 34%), linear-gradient(0deg,var(--ivory) 0%,transparent 18%); }
  .hero-copy { width: 51%; justify-content: center; padding-top: 6rem; padding-bottom: 2rem; }
  .hero h1 { font-size: clamp(4.2rem,7.2vw,6.8rem); }
  .hero-promise { font-size: clamp(1.7rem,2.4vw,2.45rem); }
  .hero-proof p { font-size: .95rem; }
  .hero-value { font-size: .9rem; }
  .practical { font-size: .74rem; }
  .duo-stage { grid-template-columns: minmax(0,1fr) 9rem minmax(0,1fr); align-items: center; }
  .person { grid-template-columns: 1fr; align-content: end; min-height: 39rem; padding: .85rem; }
  .person-image { min-height: 23rem; }
  .person-copy { min-height: 12rem; padding: 1rem .6rem .6rem; }
  .you-node { min-height: 14rem; }
  .duo-conclusion { margin-top: 4rem; }
  .method-list { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; }
  .method-step { min-height: 13rem; padding: 1.4rem 1.2rem; border-top: 1px solid var(--hairline); border-right: 1px solid var(--hairline); }
  .method-step:last-child { border-right: 0; }
  .method-number { position: static; display: block; margin-bottom: 2rem; }
  .method-line { top: auto; right: 2rem; bottom: 20.7rem; left: 2rem; width: auto; height: 1px; }
  .method-line span { width: var(--method-progress,0%); height: 100%; transition: width .5s ease-out; }
  .closed-folder { grid-template-columns: minmax(20rem,.8fr) minmax(0,1fr); padding-block: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .session-root *, .session-root *::before, .session-root *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
  .trace, .duo-line { stroke-dashoffset: 0; }
  .trace-clover { opacity: 1; }
  .orb, .hero-photo img, .person-image img, .folder-visual { transform: none !important; }
}

/* ---- hero secondary + ready / takeaway / proof strip ---- */
.session-root .hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.7rem; }
.session-root .hero-secondary { min-height:48px; }
.session-root .hero-assurance {
  margin:.75rem 0 .2rem; font-size:.84rem; letter-spacing:.01em;
  color:color-mix(in oklab, var(--ink, #23201c) 62%, transparent);
}
.session-root .hero-assurance::before {
  content:""; display:inline-block; width:7px; height:7px; margin-inline-end:.5rem;
  border-radius:999px; background:#287354; vertical-align:middle;
}

.ready-section .section-heading { margin-bottom:1.6rem; }
.takeaway-list { list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.7rem; }
.takeaway-list li {
  display:grid; grid-template-columns:auto 1fr; grid-auto-rows:min-content;
  column-gap:.9rem; align-items:baseline;
  padding:1rem 1.1rem; border-radius:20px;
  border:1px solid color-mix(in oklab, currentColor 12%, transparent);
  background:color-mix(in oklab, #ffffff 62%, transparent);
}
.takeaway-list strong { font-size:1.02rem; }
.takeaway-list small {
  grid-column:2; display:block; margin-top:.25rem; font-size:.86rem; line-height:1.5;
  color:color-mix(in oklab, currentColor 62%, transparent);
}
.takeaway-index {
  grid-row:span 2; font-size:.72rem; font-weight:600; letter-spacing:.18em;
  color:color-mix(in oklab, currentColor 45%, transparent);
}

.crowd-proof {
  position:relative; margin:0 0 1.6rem; border-radius:22px; overflow:hidden;
  border:1px solid color-mix(in oklab, currentColor 12%, transparent);
  isolation:isolate;
}
.crowd-proof img {
  display:block; width:100%; height:clamp(120px, 26vw, 200px); object-fit:cover; object-position:50% 42%;
  filter:saturate(.55) contrast(.95);
}
.crowd-proof::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(247,244,238,.18) 0%, rgba(247,244,238,.55) 45%, rgba(247,244,238,.94) 100%);
}
.crowd-proof figcaption {
  position:absolute; z-index:1; inset:auto 0 0 0; padding:0 1.15rem 1.05rem;
  display:grid; gap:.2rem;
}
.crowd-proof figcaption strong { font-size:clamp(1.02rem, 4.2vw, 1.35rem); line-height:1.25; }
.crowd-proof figcaption span { font-size:.85rem; color:color-mix(in oklab, currentColor 65%, transparent); }

.ready-actions { display:grid; gap:.7rem; justify-items:start; }
.ready-actions .button { width:100%; }
.ready-risk { margin:0; font-size:.82rem; color:color-mix(in oklab, currentColor 60%, transparent); }

@media (min-width: 860px) {
  .takeaway-list { grid-template-columns:repeat(3, 1fr); }
  .takeaway-index { grid-row:auto; }
  .takeaway-list li { grid-template-columns:1fr; }
  .takeaway-list small { grid-column:1; }
  .crowd-proof img { height:230px; }
  .ready-actions { justify-items:center; }
  .ready-actions .button { width:auto; min-width:280px; }
}

/* ---- booking: quick options, risk line, success extras ---- */
.choice.choice-soft { border-style:dashed; }
.booking-risk {
  margin:.9rem 0 0; font-size:.82rem; text-align:center;
  color:color-mix(in oklab, currentColor 62%, transparent);
}
.success-actions { display:grid; gap:.6rem; margin-top:1.1rem; }
.success-next {
  margin:.6rem 0 0; font-size:.9rem;
  color:color-mix(in oklab, currentColor 70%, transparent);
}
.draft-resume {
  display:flex; flex-wrap:wrap; align-items:center; gap:.6rem;
  margin:1rem 0 0; padding:.85rem 1rem; border-radius:18px;
  border:1px dashed color-mix(in oklab, currentColor 22%, transparent);
  font-size:.88rem;
}
.draft-resume button { font:inherit; }

/* Show the full room instead of cropping the proof photo into a narrow strip. */
.crowd-proof img {
  height:clamp(180px, 33.36vw, 430px);
  object-position:50% 50%;
}
@media (min-width: 860px) {
  .crowd-proof img { height:clamp(300px, 33.36vw, 430px); }
}