/* ============================================================
   BetaReal — portfolio
   One visual system: paper, ink, and restrained neutrals.
   Partner colour lives inside photography and screenshots only.
   ============================================================ */

:root{
  --paper:      #FBFAF8;
  --paper-2:    #F3F1ED;
  --paper-3:    #EAE7E1;
  --ink:        #12110F;
  --ink-2:      #3A3733;
  --muted:      #7A756D;
  --line:       rgba(18,17,15,.13);
  --line-soft:  rgba(18,17,15,.07);

  --serif: "Noto Serif Georgian", "Iowan Old Style", Georgia, serif;
  --sans:  "Noto Sans Georgian", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Background doodle strength. ~.03 is a whisper, ~.12 starts competing
     with body text. Tune here — it is the only place it is set. */
  --doodle: .085;

  --maxw: 1180px;
  --gut: clamp(24px, 6vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box }

html{ -webkit-text-size-adjust:100% }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Doodle ground — deliberately faint. It is texture, not decoration. */
body::before{
  content:"";
  position:fixed; inset:0;
  background:url("../img/doodles.svg") repeat;
  background-size:560px 560px;
  opacity:var(--doodle);
  pointer-events:none;
  z-index:0;
}
body > *{ position:relative; z-index:1 }

img{ max-width:100%; display:block }
a{ color:inherit }

.wrap{
  width:100%; max-width:var(--maxw); margin-inline:auto;
  /* Never a `padding` shorthand on anything that also carries .wrap — it would
     reset these and drop the text onto the screen edge. Use padding-block. */
  padding-left:max(var(--gut), env(safe-area-inset-left));
  padding-right:max(var(--gut), env(safe-area-inset-right));
}

/* ---------- type ---------- */
h1,h2,h3{ font-family:var(--serif); font-weight:600; letter-spacing:-.015em; margin:0 }
h1{ font-size:clamp(2.4rem,6.2vw,4.4rem); line-height:1.06 }
h2{ font-size:clamp(1.9rem,4.2vw,3.1rem); line-height:1.12 }
h3{ font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.25 }
p{ margin:0 0 1em }
.lede{ font-size:clamp(1.02rem,1.5vw,1.2rem); color:var(--ink-2); max-width:62ch }
.muted{ color:var(--muted) }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem; font-weight:700;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--muted);
  display:flex; align-items:center; gap:.7em;
}
.eyebrow::before{
  content:""; width:26px; height:1px; background:var(--ink); opacity:.45; flex:none;
}
.num{ font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; color:var(--muted) }

/* ---------- header ---------- */
.hdr{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--paper) 82%, transparent);
  backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.hdr .wrap{ display:flex; align-items:center; gap:24px; height:66px }
.brand{ display:flex; align-items:center; text-decoration:none; flex:none }
.brand img{ height:23px; width:auto; display:block }
@media (max-width:420px){ .brand img{ height:20px } }
.hdr nav{ margin-inline-start:auto; display:flex; align-items:center; gap:20px }
.hdr nav a{
  font-size:.86rem; text-decoration:none; color:var(--ink-2);
  transition:color .2s var(--ease);
}
.hdr nav a:hover{ color:var(--ink) }
/* Section links: underline grows in on hover; the section on screen stays marked */
.hdr nav > a{ position:relative; padding-block:6px }
.hdr nav > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1.5px; border-radius:2px;
  background:var(--ink); transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.hdr nav > a:hover::after, .hdr nav > a.is-active::after{ transform:scaleX(1) }
.hdr nav > a.is-active{ color:var(--ink) }
@media (max-width:820px){ .hdr nav .hide-sm{ display:none } }

.social-links{ display:flex; align-items:center; gap:8px }
.nav-social{ padding-inline-start:14px; border-inline-start:1px solid var(--line) }
@media (max-width:820px){ .nav-social{ padding-inline-start:0; border-inline-start:none } }
.social-ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:9px;
  border:1px solid var(--line); color:var(--ink-2);
  transition:.22s var(--ease);
}
.social-ico svg{ width:15px; height:15px; display:block; fill:currentColor }
.social-ico:hover{ transform:translateY(-1px); border-color:var(--ink); color:var(--ink) }
.social-ico.ico-ig:hover{ border-color:#FF0069; color:#FF0069 }
.social-ico.ico-tt:hover{ border-color:var(--ink); color:var(--ink) }
.social-ico.ico-fb:hover{ border-color:#0866FF; color:#0866FF }

.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--sans); font-size:.86rem; font-weight:600;
  padding:.62em 1.15em; border-radius:999px;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.btn:hover{ border-color:var(--ink); background:var(--paper-2) }
.btn-solid{ background:var(--ink); color:var(--paper); border-color:var(--ink) }
.btn-solid:hover{ background:#000; color:var(--paper) }
.btn-sm{ font-size:.78rem; padding:.45em .9em }

/* ---------- intro ---------- */
.intro{
  padding-block:clamp(28px,4vw,56px) clamp(32px,5vw,56px);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:clamp(32px,5vw,72px); align-items:start;
}
.intro h1{
  margin:.5em 0 .38em;
  /* Sized to its half of the grid: the Georgian headline's longest word
     (დათვალიერება,) must fit the column, not run under the video. */
  font-size:clamp(2.1rem,3.5vw,3.5rem);
  overflow-wrap:break-word;
}
@media (max-width:900px){ .intro h1{ font-size:clamp(2.1rem,7.4vw,3.4rem) } }
.intro-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:8px }
.intro-proof{
  margin:16px 0 0; font-size:.83rem; color:var(--muted);
}
.intro-stats{
  display:flex;
  margin-top:clamp(28px,4vw,40px); padding-top:24px;
  border-top:1px solid var(--line-soft);
}
.intro-stats .stat{ display:flex; flex-direction:column; gap:.28em }
.intro-stats b{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.3rem,2vw,1.6rem);
  color:var(--ink); line-height:1.1;
}
.intro-stats span{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.05em; color:var(--muted);
}
.intro-media{ margin:0 }
.intro-media video{
  display:block; width:100%; height:auto; aspect-ratio:848/478; object-fit:cover;
  border-radius:16px; border:1px solid var(--line-soft);
  background:var(--paper-3);
  box-shadow:0 24px 60px rgba(18,17,15,.12);
}
.intro-model{
  margin-top:20px;
  aspect-ratio:848/478;
  border-radius:16px; border:1px solid var(--line-soft);
  background:
    radial-gradient(64% 52% at 50% 58%, rgba(18,17,15,.05) 0%, transparent 68%),
    linear-gradient(170deg, #FFFFFF 0%, var(--paper-2) 100%);
  overflow:hidden;
}
.intro-model model-viewer{
  width:100%; height:100%; display:block;
  --poster-color:transparent; background:transparent;
}
.intro-model model-viewer::part(default-progress-bar){ display:none }
@media (max-width:900px){
  .intro{ grid-template-columns:1fr }
  .intro-media{ margin-top:28px }
}
/* ---------- partner ---------- */
.partner{ padding-block:clamp(28px,5vw,56px) }

.band{
  position:relative;
  width:100vw; margin-inline:calc(50% - 50vw);
  aspect-ratio:1600/420;
  min-height:190px;
  overflow:hidden;
  background:var(--paper-3);
}
.band img{
  width:100%; height:100%;
  object-fit:cover; object-position:center center;
}
.band::after{
  content:""; position:absolute; inset:0;
  box-shadow:inset 0 0 0 1px var(--line-soft);
  pointer-events:none;
}

.partner-head{
  display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 32px;
  padding-top:clamp(26px,4vw,44px);
}
.partner-head .who{ flex:1 1 320px; min-width:0 }
.partner-head h2{ margin-top:.34em }
.partner-head .kind{ color:var(--muted); font-size:.92rem; margin-top:.5em }

/* nudge */
.nudge{
  display:flex; align-items:center; gap:.65em;
  margin:clamp(30px,4.5vw,52px) 0 16px;
  font-size:.87rem; color:var(--ink-2);
}
.nudge svg{ flex:none; width:17px; height:17px; opacity:.62 }
.nudge b{ font-weight:700; color:var(--ink) }

/* ---------- conveyor ---------- */
/* A real scroll container, advanced by JS. Native overflow gives touch swipe
   and trackpad/wheel for free; app.js adds mouse drag and the auto-advance. */
.conveyor{
  position:relative;
  width:100vw; margin-inline:calc(50% - 50vw);
  padding-block:6px 10px;
  overflow-x:auto; overflow-y:hidden;
  overscroll-behavior-x:contain;
  scrollbar-width:none; -ms-overflow-style:none;
  cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.conveyor::-webkit-scrollbar{ width:0; height:0; display:none }
.conveyor.is-drag{ cursor:grabbing }
.conveyor.is-drag .dish{ pointer-events:none }
.track{
  display:flex; gap:20px; width:max-content;
  padding-inline:var(--gut);
  will-change:transform;           /* sub-pixel remainder, see app.js */
}

.dish{
  flex:none; width:clamp(190px,23vw,254px);
  background:transparent; border:0; padding:0; margin:0;
  font:inherit; color:inherit; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:12px;
}
.dish .stage{
  position:relative;
  aspect-ratio:1;
  border-radius:14px;
  background:
    radial-gradient(64% 52% at 50% 58%, rgba(18,17,15,.055) 0%, transparent 68%),
    linear-gradient(170deg, #FFFFFF 0%, var(--paper-2) 100%);
  border:1px solid var(--line-soft);
  overflow:hidden;
  transition:border-color .3s var(--ease), transform .35s var(--ease), box-shadow .35s var(--ease);
}
.dish .stage img{
  width:100%; height:100%; object-fit:contain;
  padding:7%;
  transition:transform .45s var(--ease);
}
.dish:hover .stage,
.dish:focus-visible .stage{
  border-color:var(--line);
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(18,17,15,.09);
}
.dish:hover .stage img{ transform:scale(1.045) }

/* Live card: the 3D model sits exactly over the poster (same 7% inset as the
   image's padding, same camera) and fades in once loaded. It never takes
   pointer events, so drag and tap behave exactly as on the still card. */
.dish .stage model-viewer{
  position:absolute; inset:7%; width:auto; height:auto;
  background:transparent; --poster-color:transparent;
  pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease), transform .45s var(--ease);
}
.dish .stage model-viewer::part(default-progress-bar){ display:none }
.dish .stage.is-live model-viewer{ opacity:1 }
.dish .stage.is-live img{ opacity:0; transition:opacity .5s var(--ease) }
.dish:hover .stage model-viewer{ transform:scale(1.045) }
.dish:focus-visible{ outline:none }
.dish:focus-visible .stage{ outline:2px solid var(--ink); outline-offset:3px }

.dish .tag{
  position:absolute; top:10px; left:10px;
  font-family:var(--mono); font-size:.6rem; letter-spacing:.12em;
  padding:.34em .6em; border-radius:999px;
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  border:1px solid var(--line-soft); color:var(--ink-2);
  backdrop-filter:blur(6px);
}
.dish .label{ display:flex; align-items:baseline; justify-content:space-between; gap:10px }
.dish .label span{ font-size:.9rem; line-height:1.32 }
.dish .label i{
  font-style:normal; font-family:var(--mono); font-size:.66rem;
  color:var(--muted); opacity:0; transform:translateX(-4px);
  transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.dish:hover .label i, .dish:focus-visible .label i{ opacity:1; transform:none }

/* Reduced motion: app.js skips the auto-advance. The belt stays scrollable
   by hand, and snapping makes that easier without any movement of its own. */
@media (prefers-reduced-motion:reduce){
  .conveyor{ scroll-snap-type:x proximity }
  .dish{ scroll-snap-align:center }
}

/* ---------- partners ---------- */
.partners{ padding-block:clamp(40px,6vw,68px) }
.partners > .head{ text-align:center; max-width:none; margin-bottom:clamp(28px,4vw,44px) }
.partners > .head h2{ margin:0 }
.partners-grid{
  display:flex; flex-wrap:wrap; gap:18px; justify-content:center;
}
.partner-card{
  display:flex; align-items:center; gap:24px;
  width:100%; max-width:600px;
  padding:22px 26px; border-radius:16px;
  border:1px solid var(--line-soft); background:var(--paper-2);
  text-decoration:none; color:inherit;
  transition:border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
.partner-card:hover{
  border-color:var(--line); transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(18,17,15,.09);
}
.partner-logo{
  height:64px; width:64px; flex:none; object-fit:cover;
  border-radius:12px; border:1px solid var(--line-soft); background:var(--paper);
}
.partner-info{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.partner-live{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted);
}
.partner-live .pdot{
  width:6px; height:6px; border-radius:50%; background:#3a9a5c; flex:none;
}
.partner-name{ font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--ink) }
.partner-meta{ font-size:.86rem; color:var(--muted) }
.partner-link{
  display:inline-flex; align-items:center; gap:7px; margin-top:2px;
  font-size:.84rem; font-weight:600; color:var(--ink);
}
.partner-link .arr{ transition:transform .28s var(--ease) }
.partner-card:hover .partner-link .arr{ transform:translateX(4px) }
@media (max-width:560px){
  .partner-card{ flex-direction:column; text-align:center; padding:24px 20px }
  .partner-info{ align-items:center }
}

/* ---------- identity break ---------- */
/* ---------- how ---------- */
.how{ padding-block:clamp(44px,7vw,84px) }
.how .head{ max-width:56ch }
.how h2{ margin:.5em 0 .4em }
.steps{
  display:grid; gap:20px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-top:clamp(36px,5vw,58px);
}
.step{
  border:1px solid var(--line-soft); border-radius:16px;
  background:linear-gradient(168deg,#fff, var(--paper-2));
  padding:24px 22px 26px;
  display:flex; flex-direction:column;
}
.step .shot{
  aspect-ratio:4/3; border-radius:10px; overflow:hidden;
  background:var(--paper-3); border:1px solid var(--line-soft);
  margin-bottom:20px;
}
.step .shot img{ width:100%; height:100%; object-fit:cover; object-position:center top }
.step h3{ margin:.5em 0 .45em }
.step p{ font-size:.92rem; color:var(--ink-2); margin:0 }
/* Hover: same lift as the pricing cards, the photo eases in, the others dim */
.step{ transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), opacity .35s var(--ease) }
.step .shot img{ transition:transform .6s var(--ease) }
.step .num{ transition:color .35s var(--ease) }
.step:hover{
  transform:translateY(-8px); border-color:var(--line);
  box-shadow:0 28px 50px -30px rgba(18,17,15,.35);
}
.step:hover .shot img{ transform:scale(1.05) }
.step:hover .num{ color:var(--ink) }
.steps:hover .step:not(:hover){ opacity:.82 }
@media (hover:none){ .steps:hover .step:not(:hover){ opacity:1 } }
@media (prefers-reduced-motion:reduce){
  .step, .step:hover, .step .shot img, .step:hover .shot img{ transition:none; transform:none }
  .hdr nav > a::after{ transition:none }
}

/* ---------- process ---------- */
.process{ padding-block:clamp(44px,7vw,84px); border-top:1px solid var(--line-soft) }
.process .head{ max-width:56ch }
.process h2{ margin:.5em 0 .4em }
.proc-list{
  max-width:720px; margin:clamp(36px,5vw,52px) auto 0;
  display:flex; flex-direction:column;
}
.proc-step{
  display:flex; gap:22px; padding-block:20px;
  border-bottom:1px solid var(--line-soft);
}
.proc-step:first-child{ padding-top:0 }
.proc-step .k{
  flex:none; font-family:var(--mono); font-size:.8rem; color:var(--muted);
  padding-top:.2em;
}
.proc-step b{ display:block; font-family:var(--serif); font-size:1.05rem; font-weight:600; color:var(--ink) }
.proc-step p{ margin:.4em 0 0; font-size:.92rem; color:var(--ink-2) }
/* Steps light up one by one as they scroll past; hover nudges the row.
   .js-steps is set by app.js, so without JS every step simply shows. */
.proc-step{ transition:opacity .5s var(--ease), transform .5s var(--ease) }
.proc-step .k, .proc-step b{ transition:color .3s var(--ease), transform .3s var(--ease) }
.proc-step > div{ transition:transform .3s var(--ease) }
.proc-step:hover .k{ color:var(--ink) }
.proc-step:hover > div{ transform:translateX(6px) }
.js-steps .proc-step{ opacity:.35; transform:translateY(10px) }
.js-steps .proc-step.is-on{ opacity:1; transform:none }
.js-steps .proc-step.is-on .k{ color:var(--ink) }
@media (prefers-reduced-motion:reduce){
  .proc-step, .proc-step > div, .proc-step .k{ transition:none }
  .proc-step:hover > div{ transform:none }
}
.proc-tag{
  text-align:center; margin:clamp(32px,5vw,44px) 0 0;
  font-family:var(--serif); font-weight:600;
  font-size:clamp(1.2rem,2.2vw,1.5rem); color:var(--ink);
}

/* ---------- contact ---------- */
/* ---------- faq ---------- */
/* ---------- pricing ---------- */
.pricing{ padding-block:clamp(44px,7vw,84px); border-top:1px solid var(--line-soft) }
.pricing > .head{ max-width:none; margin-bottom:clamp(28px,4vw,40px) }
.pricing-group{ max-width:900px; margin:0 auto clamp(32px,5vw,44px) }
.pricing-group:last-child{ margin-bottom:0 }
.pricing-group h3{
  font-family:var(--serif); font-weight:600; font-size:1.2rem; color:var(--ink);
  text-align:center; margin:0 0 10px;
}
.pricing-note{
  text-align:center; max-width:60ch; margin:0 auto 24px;
  font-size:.9rem; color:var(--muted);
}
.pricing-extramodel{
  text-align:center; margin:-10px auto 24px;
  font-size:.9rem; font-weight:600; color:var(--ink);
}
.tiers{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px;
}
.tiers-4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
.tier{
  border:1px solid var(--line-soft); border-radius:14px;
  background:var(--paper-2); padding:20px 18px; text-align:center;
}
.tier-feat{ border-color:var(--line); background:linear-gradient(168deg,#fff, var(--paper-2)) }
.tier .tag{
  display:inline-block; font-family:var(--mono); font-size:.68rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  margin-bottom:10px;
}
.tier .price{
  font-family:var(--serif); font-weight:600; font-size:1.35rem; color:var(--ink);
}
.tier .price small{ font-family:var(--sans); font-weight:400; font-size:.7rem; color:var(--muted) }
.tier-sub{ margin:.35em 0 0; font-size:.8rem; color:var(--muted) }

.setup-banner{
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin:0 0 22px; padding:18px 24px;
  border:1px solid var(--ink); border-radius:14px;
  background:var(--ink); color:var(--paper);
}
.setup-num{
  font-family:var(--serif); font-weight:600; font-size:clamp(1.6rem,3vw,2.1rem);
  line-height:1; flex:none;
}
.setup-label{ font-size:.92rem; max-width:32ch }
@media (max-width:480px){
  .setup-banner{ flex-direction:column; text-align:center; gap:6px }
}

.pilot-card{
  margin-top:20px; text-align:center;
  border:1px dashed var(--line); border-radius:16px;
  padding:24px 22px;
}
.pilot-card .pilot-tag{
  display:inline-block; font-family:var(--sans); font-size:.95rem; font-weight:800;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
  border:1.5px solid var(--ink); border-radius:999px; padding:.35em 1em;
  margin-bottom:10px;
}
.pilot-card h4{
  margin:0 0 8px; font-family:var(--serif); font-weight:600; font-size:1.15rem; color:var(--ink);
}
.pilot-card p{ margin:0 0 18px; font-size:.9rem; color:var(--muted); max-width:44ch; margin-inline:auto }

.price-cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  max-width:760px; margin-inline:auto;
}
.price-card{
  position:relative;
  border:1px solid var(--line-soft); border-radius:16px;
  background:var(--paper-2); padding:44px 24px; text-align:center;
}
.price-card-save{
  border-color:#2f7a4f; background:color-mix(in srgb, #2f7a4f 7%, var(--paper-2));
}
.price-card .tag{
  display:inline-block; font-family:var(--mono); font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  margin-bottom:8px;
}
.price-card .save-badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:#2f7a4f; color:#fff; font-family:var(--mono); font-size:.66rem;
  font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  padding:.4em .9em; border-radius:999px; white-space:nowrap;
}
.price-card .p-price{
  font-family:var(--serif); font-weight:700; font-size:clamp(2rem,4vw,2.6rem);
  color:var(--ink); line-height:1;
}
.price-card .p-per{ margin:.4em 0 0; font-size:.85rem; color:var(--muted) }
.price-card hr{ border:none; border-top:1px solid var(--line-soft); margin:16px 0 }
.price-card .p-sub{ margin:0; font-size:.85rem; color:var(--ink-2) }
.price-card .p-total{ margin:0; font-size:.85rem; color:var(--muted) }
.price-card .p-save{ margin:0; font-size:.92rem; font-weight:700; color:#2f7a4f }
.price-footnote{
  text-align:center; margin:16px 0 0; font-size:.78rem; color:var(--muted);
}
@media (max-width:720px){
  .price-cards{ grid-template-columns:1fr }
}

.btn-wa{
  background:#25D366; color:#fff; border-color:#25D366;
}
.btn-wa:hover{ background:#1fb959; border-color:#1fb959; color:#fff }
@media (max-width:640px){
  .tiers, .tiers-4{ grid-template-columns:repeat(2,minmax(0,1fr)) }
}

.faq{ padding-block:clamp(40px,6vw,68px); border-top:1px solid var(--line-soft) }
.faq > .head{ max-width:none }
.faq-list{
  max-width:680px; margin:clamp(32px,5vw,44px) auto 0;
  display:flex; flex-direction:column; gap:10px;
}
.faq-item{
  border:1px solid var(--line-soft); border-radius:14px;
  background:var(--paper-2); padding:16px 20px;
}
.faq-item summary{
  cursor:pointer; list-style:none; font-family:var(--serif);
  font-weight:600; font-size:1rem; color:var(--ink);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
}
.faq-item summary::-webkit-details-marker{ display:none }
.faq-item summary::after{
  content:"+"; flex:none; font-family:var(--mono); font-size:1.1rem;
  color:var(--muted); transition:transform .2s var(--ease);
}
.faq-item[open] summary::after{ transform:rotate(45deg) }
.faq-item p{ margin:.7em 0 0; font-size:.92rem; color:var(--ink-2) }
/* Hover and open states, and a smooth open where the browser supports
   animating <details> (others just open instantly, as before). */
.faq-item{ transition:background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease) }
.faq-item:hover{ background:#fff; border-color:var(--line) }
.faq-item:hover summary::after{ color:var(--ink) }
.faq-item[open]{ background:#fff; border-color:var(--line); box-shadow:0 18px 36px -28px rgba(18,17,15,.35) }
.faq-item[open] summary::after{ color:var(--ink) }
.faq-item summary:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; border-radius:4px }
.faq-list{ interpolate-size:allow-keywords }
.faq-item::details-content{
  block-size:0; overflow:hidden;
  transition:block-size .35s var(--ease), content-visibility .35s allow-discrete;
}
.faq-item[open]::details-content{ block-size:auto }
@media (prefers-reduced-motion:reduce){
  .faq-item, .faq-item::details-content{ transition:none }
}

.contact{ padding-block:clamp(44px,7vw,84px); border-top:1px solid var(--line-soft) }
.cta-card{
  max-width:640px; margin-inline:auto; text-align:center;
  padding:clamp(32px,5vw,52px) clamp(24px,4vw,44px);
  border:1px solid var(--line-soft); border-radius:20px;
  background:linear-gradient(168deg,#fff, var(--paper-2));
}
.contact h2{ margin:.5em 0 .45em }
.contact .lede{ margin-inline:auto }
.contact .actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:26px }
.contact .actions-secondary{ margin-top:12px }
.contact .direct{
  margin-top:22px; font-family:var(--mono);
  font-size:.76rem; letter-spacing:.04em; color:var(--muted);
}
.contact .direct a{ text-decoration:none; border-bottom:1px solid var(--line); color:inherit }

/* ---------- footer ---------- */
footer{ border-top:1px solid var(--line-soft); padding-block:clamp(32px,5vw,48px) 24px }
.foot{
  display:flex; flex-wrap:wrap; gap:40px 60px; justify-content:space-between;
  padding-bottom:clamp(32px,5vw,48px);
}
.foot > div:first-child{ flex:1 1 280px; max-width:360px }
.foot .brand img{ height:22px; width:auto; display:block; margin-bottom:16px }
.foot > div:first-child p{ font-size:.86rem; color:var(--muted); margin:0 }
.foot-social{ margin-top:18px }
.foot-social .social-ico{ width:36px; height:36px }
.foot-social .social-ico svg{ width:17px; height:17px }
.foot-links{ display:flex; flex-wrap:wrap; gap:36px 48px }
.foot-col{ display:flex; flex-direction:column; gap:9px; min-width:120px }
.foot-col h5{
  margin:0 0 4px; font-family:var(--sans); font-size:.74rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.foot-col a{ font-size:.86rem; text-decoration:none; color:var(--ink-2) }
.foot-col a:hover{ color:var(--ink) }
.foot-bot{
  display:flex; flex-wrap:wrap; gap:8px 24px; justify-content:space-between;
  padding-top:20px; border-top:1px solid var(--line-soft);
  font-size:.76rem; color:var(--muted);
}

/* ---------- modal ---------- */
.modal[hidden]{ display:none !important }
.modal{
  position:fixed; inset:0; z-index:100;
  display:grid; place-items:center;
  padding:clamp(14px,3vw,36px);
  background:color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter:blur(16px) saturate(150%);
  animation:fade .24s var(--ease);
}
@keyframes fade{ from{ opacity:0 } }
.sheet{
  position:relative;
  width:min(760px,100%);
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 30px 80px rgba(18,17,15,.16);
  overflow:hidden;
  display:flex; flex-direction:column;
  max-height:100%;
}
.sheet header{
  display:flex; align-items:center; gap:14px;
  padding:16px 18px; border-bottom:1px solid var(--line-soft);
}
.sheet header .t{ min-width:0 }
.sheet header h3{ font-size:1.05rem; line-height:1.25 }
.sheet header .s{ font-size:.76rem; color:var(--muted); margin-top:2px }
.sheet header .x{
  margin-inline-start:auto; flex:none;
  width:36px; height:36px; border-radius:50%;
  border:1px solid var(--line); background:transparent; color:var(--ink);
  cursor:pointer; font-size:19px; line-height:1;
  display:grid; place-items:center;
  transition:background .2s var(--ease), border-color .2s var(--ease);
}
.sheet header .x:hover{ background:var(--paper-2); border-color:var(--ink) }
.sheet .viewer{
  aspect-ratio:1; width:100%; min-height:0;
  background:
    radial-gradient(62% 48% at 50% 56%, rgba(18,17,15,.05) 0%, transparent 70%),
    linear-gradient(175deg,#fff, var(--paper-2));
}
.sheet model-viewer{ width:100%; height:100%; --poster-color:transparent; background:transparent }
/* Models run 3–13MB; keep feedback, just make it quiet. */
.sheet model-viewer::part(default-progress-bar){
  height:2px; background:var(--ink); opacity:.75;
}
.sheet footer{
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:14px 18px; border-top:1px solid var(--line-soft); border-bottom:0;
}
.sheet footer .hint{ font-size:.78rem; color:var(--muted) }
.sheet footer .sp{ margin-inline-start:auto }

@media (max-width:560px){
  .sheet .viewer{ aspect-ratio:4/3 }
  /* Hint on its own row, the two buttons side by side under it. */
  .sheet footer .hint{ flex-basis:100% }
  .sheet footer .sp{ display:none }
}

/* ---------- AR (Android WebXR, see assets/js/ar.js) ----------
   Lives inside the camera feed, so it is dark glass rather than paper.
   The ids beat `body > *` above, which would otherwise make it relative. */
#xr-overlay{
  display:none; position:fixed; inset:0; z-index:201;
  pointer-events:none; font-family:var(--sans); color:#fff;
}
#xr-gestures{ display:none; position:absolute; inset:0; pointer-events:all; z-index:1 }
#xr-overlay button{
  pointer-events:all; position:absolute; z-index:2;
  font-family:var(--sans); font-size:13px; font-weight:600;
  background:rgba(18,17,15,.62); color:#fff;
  border:1px solid rgba(255,255,255,.22); border-radius:999px;
  padding:8px 16px; cursor:pointer;
}
#xr-exit { top:18px; right:18px }
#xr-again{ top:62px; right:18px; display:none }
#xr-hide { top:18px; left:18px; transition:opacity .25s }
#xr-hide.dim{ opacity:.35 }
#xr-label{ top:62px; left:18px; display:none }
#xr-place-hint{
  position:absolute; bottom:120px; left:50%; transform:translateX(-50%);
  width:80%; max-width:320px; padding:10px 20px; border-radius:20px;
  background:rgba(18,17,15,.62); text-align:center; font-size:14px; line-height:1.4;
}
#xr-hint-step{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:3px }
#xr-hint-step:empty{ display:none }
#xr-nav{
  display:none; position:absolute; z-index:2; bottom:60px; left:50%; transform:translateX(-50%);
  pointer-events:all; align-items:center; gap:16px;
  background:rgba(18,17,15,.62); padding:8px 20px; border-radius:30px;
}
#xr-overlay #xr-nav button{
  position:static; width:44px; height:44px; padding:0; border-radius:50%;
  font-size:18px; background:transparent; border-color:rgba(255,255,255,.35);
  display:flex; align-items:center; justify-content:center;
}
#xr-move-hint{
  display:none; position:absolute; bottom:30px; left:50%; transform:translateX(-50%);
  max-width:80%; text-align:center; font-size:12px; color:rgba(255,255,255,.6);
}
#xr-gauge{
  display:none; position:absolute; bottom:180px; left:50%; transform:translateX(-50%);
  min-width:130px; padding:8px 16px; border-radius:20px; text-align:center;
  background:rgba(18,17,15,.62); border:1px solid rgba(255,255,255,.2);
}
#xr-gauge-track{ position:relative; height:4px; margin-bottom:5px; border-radius:2px; background:rgba(255,255,255,.18) }
#xr-gauge-fill{ position:absolute; left:0; top:0; bottom:0; border-radius:2px; background:#fff }
#xr-gauge-mark{ position:absolute; top:-3px; width:2px; height:10px; border-radius:1px; background:rgba(255,255,255,.55); left:calc(53.7% - 1px) }
#xr-gauge-pct{ font-size:13px; font-weight:700 }

/* "Above the table, then tilt toward you" → "tap the circle" guide. */
#xr-scan-guide{
  display:none; position:absolute; bottom:196px; left:50%; transform:translateX(-50%);
  width:200px; padding:10px 10px 4px; border-radius:20px; background:rgba(18,17,15,.55);
}
#xr-scan-guide.show{ display:block }
#xr-scan-guide svg{ display:block; width:100%; height:auto; overflow:visible }
#xr-scan-guide .sg-tap, #xr-scan-guide[data-step="tap"] .sg-scan{ display:none }
#xr-scan-guide[data-step="tap"] .sg-tap{ display:block }
#xr-scan-guide .sg-finger, #xr-scan-guide .sg-ripple{ transform-box:view-box; transform-origin:100px 58px }
#xr-scan-guide .sg-finger{ animation:sg-finger 1.6s ease-in-out infinite }
#xr-scan-guide .sg-ripple{ animation:sg-ripple 1.6s ease-out infinite }
#xr-scan-guide .sg-arm{ transform-box:view-box; transform-origin:100px 108px; animation:sg-arc 3.6s ease-in-out infinite }
#xr-scan-guide .sg-cone{ animation:sg-cone 3.6s ease-in-out infinite }
#xr-scan-guide .sg-plate{ animation:sg-plate 3.6s ease-in-out infinite }
@keyframes sg-finger{
  0%{ translate:22px -18px; opacity:0 } 15%{ opacity:1 }
  45%{ translate:0 0; scale:1 } 55%{ translate:0 2px; scale:.92 } 65%{ translate:0 0; scale:1 }
  88%{ translate:22px -18px; opacity:1 } 100%{ translate:22px -18px; opacity:0 }
}
@keyframes sg-ripple{ 0%,52%{ scale:.5; opacity:0 } 56%{ scale:.6; opacity:.9 } 100%{ scale:1.6; opacity:0 } }
@keyframes sg-arc{
  0%{ rotate:0deg; opacity:0 } 6%{ rotate:0deg; opacity:1 } 16%{ rotate:0deg }
  68%{ rotate:-50deg } 88%{ rotate:-50deg; opacity:1 } 100%{ rotate:-50deg; opacity:0 }
}
@keyframes sg-cone{ 0%,16%{ opacity:.18 } 40%{ opacity:.32 } 68%,88%{ opacity:.45 } 100%{ opacity:0 } }
@keyframes sg-plate{ 0%,64%{ fill:rgba(255,255,255,.25) } 72%,90%{ fill:rgba(255,255,255,.95) } 100%{ fill:rgba(255,255,255,.25) } }
@media (prefers-reduced-motion:reduce){
  #xr-scan-guide .sg-arm, #xr-scan-guide .sg-cone, #xr-scan-guide .sg-plate,
  #xr-scan-guide .sg-finger, #xr-scan-guide .sg-ripple{ animation:none }
  #xr-scan-guide .sg-arm{ rotate:-30deg }
}

/* The modal's own "view on table" button; hidden where AR can't run. */
.sheet footer .ar[hidden]{ display:none }
.sheet footer .note{ flex-basis:100%; font-size:.78rem; color:var(--muted) }
.sheet footer .note:empty{ display:none }
/* ---------- pricing: three plans (2026-10 pricing) ----------
   Same paper cards as before. Every plan shows its fees the same way:
   the one-time setup fee in a black box first, the monthly price under it.
   The middle plan reuses the green the old "save" card used. Cards lift on hover.
   Each card spans the same rows through subgrid: name, fees, rule, then one
   row per feature (9). Every plan lists the features in the same order, so the
   same feature sits on the same line in all three cards. */
.pt-plans{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0 20px;
  align-items:stretch; margin-top:clamp(28px,4vw,44px);
}
.pt-plan{
  position:relative; display:grid; grid-row:span 12; grid-template-rows:subgrid;
  row-gap:0; align-content:start; min-width:0;
  background:var(--paper-2); border:1px solid var(--line-soft); border-radius:16px;
  padding:36px 28px 32px;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease), opacity .35s var(--ease);
}
.pt-plan:hover{
  transform:translateY(-8px); border-color:var(--line); background:#fff;
  box-shadow:0 28px 50px -30px rgba(18,17,15,.35);
}
.pt-best{
  background:linear-gradient(168deg,#fff, color-mix(in srgb, #2f7a4f 7%, var(--paper-2)));
  border:2px solid #2f7a4f;
  box-shadow:0 24px 48px -30px rgba(47,122,79,.55);
}
.pt-best:hover{
  transform:translateY(-10px) scale(1.015); border-color:#2f7a4f;
  background:linear-gradient(168deg,#fff, color-mix(in srgb, #2f7a4f 10%, var(--paper-2)));
  box-shadow:0 34px 60px -28px rgba(47,122,79,.6);
}
.pt-plans:hover .pt-plan:not(:hover){ opacity:.82 }

.pt-badge{
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:#2f7a4f; color:#fff; font-size:.78rem; font-weight:700;
  padding:.45em 1.1em; border-radius:999px; white-space:nowrap;
}
.pt-name{ font-family:var(--serif); font-weight:600; font-size:1.45rem; line-height:1.25; margin:0 }
.pt-for{ margin:6px 0 0; color:var(--ink-2); font-size:.95rem; line-height:1.5 }

.pt-price-block{ display:flex; flex-direction:column; gap:12px }

/* One-time setup fee: same black box on every plan */
.pt-setup{
  display:flex; align-items:center; justify-content:space-between; gap:6px 12px; flex-wrap:wrap;
  background:var(--ink); color:var(--paper); border-radius:12px; padding:14px 16px;
}
.pt-setup-label{ font-size:.88rem; line-height:1.35 }
.pt-setup-label small{ display:block; font-size:.78rem; color:rgba(251,250,248,.62) }
.pt-setup-nums{ display:flex; align-items:baseline; gap:10px; font-variant-numeric:tabular-nums; margin-left:auto }
.pt-setup-was{ font-size:1.1rem; color:rgba(251,250,248,.6); text-decoration:line-through; text-decoration-thickness:2px }
.pt-setup-now{ font-family:var(--serif); font-weight:700; font-size:clamp(1.7rem,2.6vw,2rem); line-height:1; color:var(--paper) }

/* Monthly price: same large ink number on every plan */
.pt-price-row{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; padding-inline:2px }
.pt-price{
  font-family:var(--serif); font-weight:700; font-size:clamp(2.3rem,4vw,2.8rem);
  line-height:1; letter-spacing:-.02em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.pt-per{ color:var(--muted); font-size:.95rem }

.pt-rule{ height:1px; border:0; background:var(--line); margin:0 }
.pt-plan > div, .pt-plan > .pt-rule{ margin-bottom:22px }
.pt-feats{
  list-style:none; margin:0; padding:0;
  display:grid; grid-row:span 9; grid-template-rows:subgrid; row-gap:0;
}
.pt-feats li{
  display:grid; grid-template-columns:20px 1fr; gap:12px; align-items:start; padding-bottom:12px;
  font-size:.97rem; line-height:1.5; color:var(--ink);
}
.pt-feats svg{
  width:20px; height:20px; margin-top:2px; fill:none; stroke:currentColor;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.pt-feats .yes svg{ color:var(--ink-2) }
.pt-best .pt-feats .yes svg{ color:#2f7a4f }
.pt-feats .no{ color:var(--muted) }
.pt-feats .no svg{ color:#C8372D; stroke-width:2.4 }
.pt-free{ font-weight:700; color:#2f7a4f }


@media (max-width:980px){
  .pt-plans{ grid-template-columns:1fr; max-width:32rem; margin-inline:auto; gap:30px }
  /* one card per row: no rows to share, so plain stacks */
  .pt-plan{ display:flex; flex-direction:column; grid-row:auto }
  .pt-feats{ display:flex; flex-direction:column; grid-row:auto }
  .pt-feats li:last-child{ padding-bottom:0 }
  .pt-best{ order:-1 }
  .pt-plans:hover .pt-plan:not(:hover){ opacity:1 }
}
@media (max-width:420px){
  .pt-plan{ padding:32px 20px 26px }
}
@media (prefers-reduced-motion:reduce){
  .pt-plan, .pt-plan:hover, .pt-best:hover{ transition:none; transform:none }
}