/*
Theme Name: Cartline
Theme URI: https://cartline.app
Author: GnK Web, LLC
Author URI: https://gnkwebapps.com
Description: Marketing site for Cartline, a Shopify app that turns a product into a landing page built for ad traffic. Content lives in the templates — edit them in Appearance → Theme File Editor.
Version: 1.0.0
License: Proprietary
Text Domain: cartline
*/
/* ===========================================================================
   Palette taken from the app itself: its paper, its deep green ink, the yellow
   of its promo chip. A serif display face for headings gives the page a voice
   rather than the default SaaS sans-on-white.
   =========================================================================== */
:root{
  --paper:#FFFFFF;
  --wash:#F9F7F0; /* Light Cream Wash */
  --ink:#0B2E3F;
  --ink-2:#425A66;
  --ink-3:#8A9691;
  --line:#E3E9E6;
  --line-2:#CFD9D4;
  --green:#0F7A55;
  --green-d:#0A5B3F;
  --mint:#BFE8D2;
  --mint-2:#8FD9BA;
  --teal:#3FBF8F;
  --yellow:#FFE300;
  --sale:#C0492E;
  --r:10px; --r-m:14px; --r-l:20px; --r-xl:28px;
  --mx:1180px;
  /* Four text measures, and only four. Nine arbitrary ones is what made the
     page feel like it had no system behind it. */
  --m-display:16ch;   /* headline, so it breaks where we want */
  --m-lede:52ch;      /* the sentence under a headline */
  --m-body:46ch;      /* body text inside a card, beside a panel */
  --m-prose:68ch;     /* long-form: legal pages, help, FAQ */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{font-family:'Geist','Instrument Sans',system-ui,-apple-system,sans-serif;background:var(--paper);
  color:var(--ink);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px}
svg{display:block}
/* One container. Everything sits inside it; nothing sets its own width except
   a measure limit, and any measure-limited block centres itself. That rule is
   what stops the page alternating between centred and left-hugging. */
.hero-col{min-width:0}
.wrap{max-width:var(--mx);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:'Instrument Serif','Iowan Old Style',Georgia,serif;font-weight:400;
  letter-spacing:-.015em;line-height:1.06;color:var(--ink)}
h1{font-size:clamp(42px,6vw,70px)}
h2{font-size:clamp(32px,4.4vw,52px)}
h3{font-size:clamp(25px,3vw,36px)}
h4{font-size:17px;font-weight:600;letter-spacing:-.01em}
.lede{font-size:clamp(16.5px,1.4vw,18px);color:var(--ink-2);max-width:var(--m-lede)}

.pill{display:inline-block;font-size:12.5px;font-weight:500;color:var(--green-d);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px;margin-bottom:18px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;
  border-radius:var(--r);font-size:14.5px;font-weight:600;white-space:nowrap;transition:.14s}
.btn:active{transform:translateY(1px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1d372c}
.btn-line{border:1px solid var(--line-2);color:var(--ink);background:var(--paper)}
.btn-line:hover{border-color:var(--ink-3)}
.btn-lg{height:50px;padding:0 24px;font-size:15.5px}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.lnk{display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;
  color:var(--green-d);margin-top:20px}
.lnk svg{width:16px;height:16px;transition:transform .15s}
.lnk:hover svg{transform:translateX(3px)}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:80;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--mx);margin:0 auto;padding:0 24px;height:64px;display:flex;align-items:center;gap:30px}
.brand{display:inline-flex;align-items:center;margin-right:auto}




.nav-right{display:flex;align-items:center;gap:10px}




/* ---------------- hero ---------------- */
.hero{padding:84px 0 96px;background:linear-gradient(180deg,#EDF6F1,var(--paper) 78%)}
/* Left column of text, panels on the right. Centring the hero and then
   left-aligning the section below it is what made the page feel arbitrary. */
.hero-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hero h1{max-width:var(--m-display)}
.hero .lede{margin-top:22px}

.badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.badges span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 14px}
.badges svg{width:14px;height:14px;color:var(--green)}
@media(max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:44px;text-align:left}
  .hero h1,.hero .lede{max-width:100%}
}


/* ---------------- bands ---------------- */
.band{padding:84px 0;border-top:1px solid var(--line)}
.band.alt{background:var(--wash)}
.band-head{max-width:var(--m-prose);margin:0 auto 52px;text-align:center}
.band-head p{margin-top:16px;color:var(--ink-2);font-size:17px}

/* a tinted card holding text and one panel */

.band.alt 










.grid3{display:flex;gap:20px}
.grid3 .cell{flex:1 1 0;min-width:0}
.grid3 .cell{flex:1;min-width:0}
@media(max-width:820px){.grid3{flex-direction:column}}
.cell{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-l);padding:28px 26px}
.cell h4{margin-bottom:9px}
.cell p{font-size:14.5px;color:var(--ink-2)}

/* ---------------- pricing ---------------- */












/* ---------------- faq ---------------- */
.faq{max-width:var(--m-prose);margin:0 auto;border-top:1px solid var(--line-2)}
.faq details{border-bottom:1px solid var(--line-2)}
.faq summary{padding:20px 0;font-weight:600;font-size:16px;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:21px;font-weight:300;color:var(--ink-3);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{padding:0 0 20px;color:var(--ink-2);font-size:15.5px}

/* ---------------- close + footer ---------------- */
.close{padding:96px 0;text-align:center;background:var(--wash);border-top:1px solid var(--line)}
.close h2{max-width:var(--m-display);margin:0 auto}
.close .lede{margin:18px auto 0;text-align:center}
.close .cta-row{justify-content:center}

footer{border-top:1px solid var(--line);padding:52px 0 36px}
.foot-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:34px}
@media(max-width:760px){.foot-grid{grid-template-columns:1fr 1fr}}
.foot-grid h4{font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);
  font-weight:500;margin-bottom:14px}
.foot-grid a{display:block;font-size:14.5px;color:var(--ink-2);padding:5px 0}
.foot-grid a:hover{color:var(--ink)}
.foot-bot{margin-top:38px;padding-top:24px;border-top:1px solid var(--line);display:flex;
  justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-3)}
.foot-bot a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}

/* ---------------- prose pages ---------------- */
.page-head{max-width:var(--m-prose);margin:0 auto;padding:64px 0 38px;border-bottom:1px solid var(--line)}
.page-head .updated{margin-top:14px;font-size:13.5px;color:var(--ink-3)}
.prose{max-width:var(--m-prose);margin:0 auto;padding:52px 0 88px}
.prose h2{font-size:26px;margin:36px 0 13px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:19px;margin:28px 0 8px}
.prose p{margin-bottom:15px;color:var(--ink-2)}
.prose ul,.prose ol{margin:0 0 15px 20px;color:var(--ink-2)}
.prose li{margin-bottom:7px}
.prose a{color:var(--green-d);text-decoration:underline;text-underline-offset:2px}
.prose code{font-family:'Spline Sans Mono',monospace;font-size:13.5px;background:var(--wash);
  padding:2px 6px;border-radius:5px}
.prose .note{border-left:2px solid var(--green);background:var(--mint);padding:15px 18px;
  border-radius:0 var(--r) var(--r) 0;margin-bottom:16px;font-size:15px;color:var(--ink-2)}
.prose table{width:100%;border-collapse:collapse;margin-bottom:18px;font-size:14.5px}
.prose th,.prose td{padding:11px 12px;border-bottom:1px solid var(--line);text-align:left}
.prose th{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3);font-weight:500}

/* ===========================================================================
   Wordmark. The name with a drawn rule leaving the "t" and running under
   "line" — a cart, and a line.
   =========================================================================== */
.wm{position:relative;display:inline-block;font-family:'Instrument Serif',Georgia,serif;
  line-height:1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.wm-rule{position:absolute;left:.545em;right:.02em;top:.30em;height:.045em;
  background:currentColor;opacity:.9;border-radius:1px}
.foot-mark{display:inline-block;margin-bottom:14px;color:var(--ink)}
.foot-say{font-size:14px;color:var(--ink-2);max-width:var(--m-body)}

/* ===========================================================================
   Pricing: one card. The offer and its action on the left, the whole feature
   list on the right — nothing to compare against, because there is nothing to
   choose between.
   =========================================================================== */
.price{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:0;
  max-width:940px;margin:0 auto;background:var(--paper);border:1px solid var(--line-2);
  border-radius:26px;overflow:hidden;text-align:left;
  box-shadow:0 2px 4px rgba(11,46,63,.04),0 30px 70px -40px rgba(11,46,63,.4)}
.price-l{padding:40px 40px 38px}
.price-r{padding:40px 40px 38px;border-left:1px solid var(--line);background:var(--wash)}
.price-k{font-family:'Spline Sans Mono',monospace;font-size:11.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--green-d)}
.price-n{font-size:19px;font-weight:600;margin-top:14px;letter-spacing:-.01em}
.price-p{font-size:60px;font-weight:600;line-height:1;margin:6px 0 0;letter-spacing:-.035em}
.price-p span{font-size:15px;color:var(--ink-3);letter-spacing:0;font-weight:400}
.price-s{font-size:14px;color:var(--ink-2);margin:14px 0 24px}
.price-l .btn{width:100%}
.price-assure{list-style:none;display:grid;gap:9px;margin-top:22px}
.price-assure li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)}
.price-assure svg{width:15px;height:15px;color:var(--green-d);flex-shrink:0;margin-top:2px}
.price-rh{font-size:15px;font-weight:600;margin-bottom:18px}
.price-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:11px 22px}
.price-list li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--ink-2)}
.price-list svg{width:15px;height:15px;color:var(--green-d);flex-shrink:0;margin-top:2px}
@media(max-width:860px){
  .price{grid-template-columns:1fr;max-width:520px}
  .price-r{border-left:0;border-top:1px solid var(--line)}
  .price-l,.price-r{padding:32px 26px}
  .price-list{grid-template-columns:1fr}
}

/* ===========================================================================
   The interface cards.

   Drawn from the real Cartline UI: paper ground, mono prices, green selection,
   flag chips. Used in the hero carousel and in the capability stack, so a
   change here shows in both.
   =========================================================================== */
.u-phone{background:#F7F5EF;border-radius:22px;overflow:hidden;position:relative;
  width:100%;height:100%;display:flex;flex-direction:column;
  box-shadow:0 3px 8px rgba(11,46,63,.10),0 34px 70px -26px rgba(11,46,63,.5)}

.u-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;flex-shrink:0}
.u-brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:14.5px;color:#182421}
.u-mk{width:26px;height:26px;border-radius:8px;background:#182421;color:#F7F5EF;
  display:grid;place-items:center}
.u-mk svg{width:13px;height:13px}
.u-cart{width:34px;height:34px;border-radius:10px;background:#fff;border:1px solid #E6E3DA;
  display:grid;place-items:center;position:relative;color:#182421}
.u-cart svg{width:16px;height:16px}
.u-cart i{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;border-radius:10px;
  background:#1A7F5A;color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;
  padding:0 5px;font-style:normal}

.u-b{padding:0 15px 16px;display:flex;flex-direction:column;gap:12px;min-height:0}
.u-b>*{flex-shrink:0}
.u-b.top{padding-top:15px}

/* Wide crop: a square image is taller than the offer it sits above, and the
   offer is what the card is for. */
.u-img{background:#EDE7DC;border-radius:14px;aspect-ratio:16/9;display:grid;
  place-items:center;flex-shrink:0}
.u-img svg{width:58%;height:58%}
.u-img.sm{aspect-ratio:4/3;border-radius:11px}
.u-rate{display:flex;align-items:center;gap:8px;font-size:12px;color:#55625C}
.u-stars{display:inline-flex;gap:1.5px;color:#F5A623}
.u-stars svg{width:13px;height:13px}
.u-ttl{font-size:19px;font-weight:700;letter-spacing:-.02em;color:#182421;line-height:1.15}
.u-ttl.sm{font-size:14px}

/* prices are mono — that is what makes them read as figures */
.u-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-family:'Spline Sans Mono',monospace}
.u-price b{font-size:20px;font-weight:600;color:#182421;letter-spacing:-.02em}
.u-price s{font-size:13.5px;color:#939C97}
.u-price em{font-family:'Geist',sans-serif;font-size:12px;font-weight:700;font-style:normal;color:#C0492E}
.u-price.sm b{font-size:15px}.u-price.sm s{font-size:12px}

/* buy-options */
.u-packs{display:flex;flex-direction:column;gap:9px}
.u-pack{border:1.5px solid #E6E3DA;background:#fff;border-radius:13px;padding:12px 14px;
  display:flex;gap:11px;align-items:flex-start;position:relative}
.u-pack.on{border-color:#1A7F5A;border-width:2px;padding:11px 13px}
.u-rad{width:19px;height:19px;border-radius:50%;border:2px solid #D9D5CA;flex-shrink:0;
  box-sizing:border-box;margin-top:1px}
.u-pack.on .u-rad{border-color:#1A7F5A;background:#1A7F5A;box-shadow:inset 0 0 0 3.4px #fff}
.u-pi{display:flex;flex-direction:column;gap:1px;min-width:0;padding-right:66px}
.u-pl{font-size:13.5px;font-weight:700;color:#182421}
.u-ps{font-size:11.5px;color:#55625C}
.u-pp{font-family:'Spline Sans Mono',monospace;font-size:13px;color:#182421;margin-top:2px}
.u-pp s{color:#939C97;font-size:11.5px;margin-left:5px}
.u-pv{font-size:11.5px;color:#1A7F5A}
.u-flag{position:absolute;top:10px;right:11px;font-size:10px;font-weight:700;padding:4px 8px;
  border-radius:6px;color:#fff;background:#C0492E}
.u-flag.best{background:#1A7F5A}
.u-packs.sm .u-pack{padding:9px 11px}
.u-packs.sm .u-pl{font-size:11.5px}
.u-packs.sm .u-pp{font-size:11px}
.u-packs.sm .u-rad{width:15px;height:15px}
.u-packs.sm .u-pi{padding-right:0}

.u-btn{height:46px;border-radius:13px;background:#182421;color:#F7F5EF;font-size:14px;
  font-weight:600;display:flex;align-items:center;justify-content:center;gap:9px;flex-shrink:0}
.u-btn svg{width:15px;height:15px}
.u-btn.sm{height:34px;font-size:11.5px;border-radius:10px}

/* information sections */
.u-card{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #E6E3DA;
  border-radius:13px;padding:12px 14px;flex-shrink:0}
.u-card.open{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-color:transparent}
.u-ci{width:32px;height:32px;border-radius:9px;background:#E7F2EC;display:grid;place-items:center;
  color:#1A7F5A;flex-shrink:0}
.u-ci svg{width:16px;height:16px}
.u-ct{flex:1;display:flex;flex-direction:column;min-width:0}
.u-ct b{font-size:13px;font-weight:600;color:#182421}
.u-ct i{font-size:11.5px;color:#939C97;font-style:normal}
.u-cv{color:#939C97}.u-cv svg{width:15px;height:15px}
.u-open{background:#fff;border:1px solid #E6E3DA;border-top:0;border-radius:0 0 13px 13px;
  padding:2px 14px 13px;margin-top:-12px;flex-shrink:0}
.u-open table{width:100%;font-size:11.5px;border-collapse:collapse}
.u-open td{padding:7px 0;border-bottom:1px solid #E6E3DA}
.u-open td:first-child{color:#939C97;width:42%}
.u-open tr:last-child td{border-bottom:0}
.u-open p{font-size:11.5px;color:#55625C;margin-top:9px;line-height:1.5}

/* the panel, lifted over the page */
.u-phone.sheet{background:#F7F5EF;justify-content:flex-start}
.u-back{flex:1;min-height:0;overflow:hidden;opacity:.9}
.u-sk{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.u-sk span{height:10px;border-radius:99px;background:#E6E3DA}
.u-sk span:nth-child(1){width:74%}
.u-sk span:nth-child(2){width:92%}
.u-sk span:nth-child(3){width:56%}
.u-scrim{position:absolute;inset:0;background:rgba(20,32,28,.42);z-index:2}
.u-dw{position:absolute;left:9px;right:9px;bottom:9px;background:#F7F5EF;border-radius:19px;
  z-index:3;overflow:hidden;box-shadow:0 -12px 34px rgba(20,32,28,.3);max-height:88%;
  display:flex;flex-direction:column}
.u-dw-h{display:flex;align-items:center;justify-content:space-between;padding:16px 17px 11px;
  font-size:16px;font-weight:700;color:#182421;letter-spacing:-.02em;flex-shrink:0}
.u-dw-h i{font-style:normal;width:27px;height:27px;border-radius:50%;background:rgba(20,32,28,.07);
  display:grid;place-items:center;font-size:16px;color:#55625C}
.u-dw-b{padding:0 17px;overflow:hidden;display:flex;flex-direction:column;gap:11px;min-height:0}
.u-dw-b>*{flex-shrink:0}
.u-dw-f{padding:13px 17px 17px;flex-shrink:0}

/* Colour and Size, per item in a multi-item offer */
.u-item{border-top:1px solid #E6E3DA;padding-top:11px}
.u-il{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:#939C97;margin-bottom:8px}
.u-irow{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.u-irow label{display:flex;flex-direction:column;gap:5px;font-size:11px;color:#55625C}
.u-sel{border:1px solid #D9D5CA;border-radius:10px;background:#fff;padding:10px 11px;
  font-size:13px;font-weight:500;color:#182421;display:flex;align-items:center;justify-content:space-between}
.u-sel svg{width:13px;height:13px;color:#939C97}

/* cart */
.u-line{display:flex;gap:11px;align-items:center;padding-bottom:11px;border-bottom:1px solid #E6E3DA}
.u-th{width:42px;height:42px;border-radius:10px;background:#EDE7DC;flex-shrink:0;display:grid;place-items:center}
.u-th svg{width:74%;height:74%}
.u-ln{flex:1;display:flex;flex-direction:column;min-width:0}
.u-ln b{font-size:12px;color:#182421}
.u-ln i{font-size:10.5px;color:#939C97;font-style:normal;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-lp{font-family:'Spline Sans Mono',monospace;font-size:12.5px;font-weight:600;color:#182421}
.u-up{padding-bottom:11px;border-bottom:1px solid #E6E3DA}
.u-up-h{font-size:10.5px;color:#939C97;margin-bottom:9px}
.u-up-i{display:flex;gap:11px;align-items:center}
.u-up-b{display:flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;border:1px solid #E6E3DA;
  border-radius:9px;padding:7px 11px;background:#fff;color:#182421}
.u-up-b svg{width:12px;height:12px}
.u-sum{display:flex;justify-content:space-between;font-size:13.5px;font-weight:700;color:#182421}
.u-free{display:flex;align-items:center;gap:7px;font-size:11.5px;color:#0F5C41}
.u-free svg{width:13px;height:13px}

/* live data */
.u-stock{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#C0492E}
.u-stock i{width:7px;height:7px;border-radius:50%;background:currentColor}
.u-count{display:inline-flex;align-self:flex-start;align-items:center;gap:7px;font-size:12px;
  font-weight:600;background:#C0492E;color:#fff;padding:7px 12px;border-radius:9px}
.u-count svg{width:13px;height:13px}
.u-ship .t{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;color:#0F5C41}
.u-ship .t svg{width:14px;height:14px;flex-shrink:0}
.u-ship .tr{height:5px;border-radius:99px;background:#E6E3DA;margin-top:7px;overflow:hidden}
.u-ship .tr span{display:block;height:100%;border-radius:99px;background:#1A7F5A}
.u-trust{display:flex;flex-direction:column;gap:7px}
.u-trust span{display:flex;align-items:center;gap:8px;font-size:12px;color:#55625C}
.u-trust svg{width:15px;height:15px;color:#1A7F5A}
.u-pay{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.u-pay i{font-size:9.5px;font-weight:700;font-style:normal;color:#939C97;border:1px solid #E6E3DA;
  border-radius:5px;padding:5px 7px;background:#fff}

/* assistant */
.u-say{font-size:12.5px;color:#55625C;line-height:1.5}
.u-q{font-size:13px;font-weight:600;color:#182421}
.u-a{font-size:12.5px;color:#55625C;line-height:1.55}
.u-ask{display:flex;align-items:center;gap:10px;margin-top:2px}
.u-ask-f{flex:1;border:1.5px solid #1A7F5A;border-radius:12px;padding:12px 13px;background:#fff;
  font-size:12.5px;color:#939C97}
.u-ask-b{width:42px;height:42px;border-radius:50%;background:#1A7F5A;color:#fff;flex-shrink:0;
  display:grid;place-items:center}
.u-ask-b svg{width:17px;height:17px}
.u-tbl{width:100%;font-size:12px;border-collapse:collapse}
.u-tbl td{padding:8px 0;border-bottom:1px solid #E6E3DA}
.u-tbl td:first-child{color:#182421;font-weight:500;width:44%}
.u-tbl tr:last-child td{border-bottom:0}

/* the settings, with the page beside them */
.editor{background:#fff;border-radius:18px;overflow:hidden;width:100%;height:100%;
  display:flex;flex-direction:column;border:1px solid var(--line);
  box-shadow:0 3px 8px rgba(11,46,63,.1),0 34px 70px -26px rgba(11,46,63,.5)}
.e-tabs{display:flex;gap:2px;padding:12px 14px 0;background:#FAFBFA;border-bottom:1px solid var(--line);flex-shrink:0}
.e-tabs i{font-style:normal;font-size:11.5px;padding:9px 12px;border-radius:9px 9px 0 0;color:var(--ink-3)}
.e-tabs i.on{background:#fff;color:var(--ink);font-weight:600;box-shadow:inset 0 0 0 1px var(--line);
  border-bottom:1px solid #fff;position:relative;top:1px}
.e-card{margin:14px;border:1px solid var(--line);border-radius:13px;overflow:hidden;flex-shrink:0}
.e-h{display:flex;justify-content:space-between;align-items:center;padding:13px 15px;
  font-size:13.5px;font-weight:600;color:var(--ink)}
.e-h span{font-size:11.5px;color:var(--ink-3);font-weight:400}
.e-row{display:flex;justify-content:space-between;align-items:center;padding:10px 15px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--ink-2)}
.e-drag{color:var(--ink-3);margin-right:9px;font-style:normal}
.e-sw{width:34px;height:19px;border-radius:99px;background:var(--line-2);position:relative;flex-shrink:0}
.e-sw::after{content:"";position:absolute;top:2.5px;left:2.5px;width:14px;height:14px;border-radius:50%;background:#fff}
.e-sw.on{background:#1A7F5A}.e-sw.on::after{left:17.5px}
.e-prev{margin:0 14px 14px;padding:14px;background:var(--wash);border-radius:13px;flex:1;min-height:0}
.e-lp{font-family:'Spline Sans Mono',monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:11px}
.e-scr{background:#F7F5EF;border-radius:12px;padding:11px;display:flex;flex-direction:column;gap:9px}

/* the plain URL card */
.u-plain{background:#fff;border-radius:16px;padding:18px;display:flex;flex-direction:column;gap:14px;
  box-shadow:0 2px 5px rgba(11,46,63,.08),0 24px 50px -22px rgba(11,46,63,.42)}
.u-url{border:1px solid var(--line);border-radius:10px;padding:11px 13px;display:flex;align-items:center;gap:9px}
.u-dots{display:flex;gap:5px;flex-shrink:0}
.u-dots i{width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.u-u{font-family:'Spline Sans Mono',monospace;font-size:11px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-u b{color:var(--ink)}
.u-chk{display:flex;flex-direction:column;gap:9px}
.u-chk div{display:flex;gap:9px;align-items:flex-start;font-size:13px;color:var(--ink-2)}
.u-chk svg{width:15px;height:15px;color:#1A7F5A;flex-shrink:0;margin-top:1px}


/* ===========================================================================
   Hero. The gradient is a fixed-height backdrop, not a box — that lets the
   interface card run taller than it and bleed past its lower edge, while the
   dots sit below in normal flow where nothing can clip them.
   =========================================================================== */
.hero{padding:80px 0 96px;background:linear-gradient(180deg,#EDF6F1,var(--paper) 78%)}
.hero-in{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:32px;align-items:center}
.hero-col{min-width:0}
.hero h1{max-width:var(--m-display)}
.hero .lede{margin-top:22px}
.badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:30px}
.badges span{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:8px 15px}
.badges span b{color:var(--ink);font-weight:700;font-size:14px;margin-right:1px}
.lnk-lg{font-size:15.5px;margin-top:0;align-self:center}
.btn-go{background:#8FE3AE;color:var(--ink)}
.btn-go:hover{background:#7ADB9E}

.hero-shot{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:34px}
.hero-shot::before{content:"";position:absolute;left:0;right:0;top:0;height:500px;z-index:0;
  border-radius:30px;background:linear-gradient(138deg,#3EB2A2 -93%,#ACF6C1 38.76%,#E6FFED 147%)}
.carousel{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;
  width:100%;justify-content:flex-start}
.car-track{position:relative;width:100%;height:582px}
.car-slide{position:absolute;inset:0;display:flex;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s ease,visibility 0s .5s}
.car-slide.on{opacity:1;visibility:visible;transform:none;transition:opacity .5s ease,transform .5s ease}
.car-cap{display:none}
.car-slide .u-phone,.car-slide .editor{max-width:326px}
.car-dots{display:flex;gap:7px;justify-content:center;margin-top:24px;flex-shrink:0}
.car-dots button{width:7px;height:7px;border-radius:99px;background:rgba(11,46,63,.24);
  padding:0;transition:width .25s,background .25s}
.car-dots button.on{width:22px;background:var(--ink)}
@media(prefers-reduced-motion:reduce){.car-slide{transition:none}}

@media(max-width:1024px){
  .hero-in{grid-template-columns:3fr 2fr;gap:24px}
  .hero-shot::before{height:436px}
  .car-track{height:506px}
  .car-slide .u-phone,.car-slide .editor{max-width:284px}
}
@media(max-width:767px){
  .hero{padding:56px 0 88px}
  .hero-in{grid-template-columns:1fr;gap:36px;text-align:center}
  .hero h1,.hero .lede{max-width:100%;margin-left:auto;margin-right:auto}
  .hero .cta-row{flex-direction:column;align-items:stretch;gap:14px}
  .hero .btn-go{width:100%}
  .hero .btn-line{display:none}
  .hero .lnk-lg{margin-left:auto;margin-right:auto}
  .badges{justify-content:center}
  .badges span:nth-child(2){display:none}
  .hero-shot{padding-top:26px}
  .hero-shot::before{height:420px;border-radius:24px}
  .car-track{height:486px}
  .car-slide .u-phone,.car-slide .editor{max-width:272px}
  .car-dots{margin-top:20px}
}

/* ---------------- positioning: three numbered steps ---------------- */
.flow{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.flow li{position:relative;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-l);padding:26px 24px}
.flow-k{font-family:'Spline Sans Mono',monospace;font-size:11.5px;letter-spacing:.08em;
  color:var(--green-d);display:block;margin-bottom:12px}
.flow b{display:block;font-size:17px;letter-spacing:-.01em;margin-bottom:6px}
.flow i{font-style:normal;font-size:14.5px;color:var(--ink-2)}
.flow li:not(:last-child)::after{content:"";position:absolute;right:-14px;top:50%;
  width:8px;height:8px;border-top:1.5px solid var(--line-2);border-right:1.5px solid var(--line-2);
  transform:translateY(-50%) rotate(45deg)}
@media(max-width:820px){
  .flow{grid-template-columns:1fr;gap:14px}
  .flow li:not(:last-child)::after{right:auto;left:28px;top:auto;bottom:-11px;transform:rotate(135deg)}
}

/* ---------------- the stack ----------------
   Each card sticks 20px lower than the last, so the ones behind stay visible as
   edges above the front one. The gap is scroll distance. */
.why{padding:96px 0 120px;border-top:1px solid var(--line)}
.why-in{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:64px;align-items:start}
.why-txt{position:sticky;top:120px}
.why-txt h2{margin-top:4px}
.why-txt p{margin-top:18px;color:var(--ink-2);font-size:17px;max-width:var(--m-body)}
.why-stack{display:grid;gap:420px}
.wcard{position:sticky;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:0;
  background:linear-gradient(138deg,#3EB2A2 -93%,#ACF6C1 38.76%,#E6FFED 147%);
  border-radius:32px;padding:50px 0 0 50px;overflow:hidden;min-height:480px;
  box-shadow:0 -1px 0 rgba(255,255,255,.55) inset,0 -12px 30px -18px rgba(11,46,63,.4)}
.wcard:nth-child(1){top:96px}
.wcard:nth-child(2){top:116px}
.wcard:nth-child(3){top:136px}
.wcard:nth-child(4){top:156px}
.wcard:nth-child(5){top:176px}
.wcard:nth-child(6){top:196px}
.wcard-txt{align-self:center;padding:0 0 50px;max-width:26ch}
.wcard-txt h3{margin-bottom:14px}
.wcard-txt p{color:var(--ink-2);font-size:15px;max-width:var(--m-body)}
.wcard-txt p b{color:var(--ink);font-weight:600}
.wcard-shot{align-self:center;display:flex;justify-content:center;padding-right:90px}
.wcard-shot .u-phone,.wcard-shot .editor{min-width:300px;max-width:328px;height:470px;
  margin-bottom:-150px}
/* A panel is anchored to the bottom of the page it covers. In the stack the
   bottom is the clipped half, so the panel's own action would never be seen —
   anchor it to the top here instead. */
.wcard-shot .u-dw{top:9px;bottom:auto;max-height:340px}
.wcard-shot .u-back{max-height:340px}
.wcard-shot .u-plain{max-width:340px}

@media(max-width:1024px){
  .why-in{grid-template-columns:1fr;gap:36px}
  .why-txt{position:static}
  .why-stack{gap:300px}
  .wcard{padding:44px 0 0 40px}
  .wcard-shot{padding-right:56px}
  .wcard-shot .u-phone,.wcard-shot .editor{min-width:0;max-width:290px;height:420px;margin-bottom:-130px}
}
/* On a phone there is no room for a stack: sticky needs a tall viewport and the
   two-column card cannot hold both halves. Sequence kept, mechanic replaced. */
@media(max-width:767px){
  .why{padding:64px 0 72px}
  .why-stack{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;padding:4px 24px 20px;margin:0 -24px;scrollbar-width:none}
  .why-stack::-webkit-scrollbar{display:none}
  .why-stack::after{content:"";flex:0 0 10px}
  .wcard{position:static;flex:0 0 84%;scroll-snap-align:center;grid-template-columns:1fr;
    min-height:0;padding:32px 24px 0;gap:26px;border-radius:26px}
  .wcard-txt{padding:0;max-width:100%}
  .wcard-shot{padding:0;justify-content:center}
  .wcard-shot .u-phone,.wcard-shot .editor{max-width:262px;min-width:0;height:330px;margin-bottom:-40px}
}

/* ---------------- architecture ---------------- */
.arch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center;margin-top:44px}
.arch-h{font-family:'Spline Sans Mono',monospace;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.arch-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden}
.arch-list li{background:var(--paper);padding:16px 18px;font-size:15px;font-weight:500}
.band.alt .arch-list li{background:var(--wash)}
.arch-r{display:flex;justify-content:center}
@media(max-width:900px){.arch{grid-template-columns:1fr;gap:30px}}

/* ===========================================================================
   Homepage Refinement: Section 2 & Loox-style Section 3
   =========================================================================== */

/* Section 2: 3-Card Grid (GNK style with inner background for uploads) */
.q-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; max-width: 1180px; margin-left: auto; margin-right: auto; }
.q-clean-card { background: #fff; border: 1px solid var(--line); border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, box-shadow 0.2s; }
.q-clean-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px -10px rgba(11,46,63,0.1); }
.q-card-preview { background: #F7F5EF; border: 1px solid var(--line); border-radius: 16px; margin: 20px 20px 0; aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center; padding: 16px; overflow: hidden; }
.custom-ui-media { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.custom-ui-media img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

/* Section 3 Custom Media specific sizing */
.loox-media .custom-ui-media {
  max-width: 290px;
  height: 440px;
  border-radius: 28px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,0.15);
  background: #fff;
}
.q-card-txt { padding: 24px; flex-grow: 1; display: flex; flex-direction: column; }
.q-card-txt h3 { font-family: 'Instrument Sans', sans-serif; font-size: 18px; font-weight: 700; margin-bottom: 12px; color: var(--ink); }
.q-card-txt p { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; }

@media(max-width: 900px) {
  .q-grid-3 { grid-template-columns: 1fr; }
}

/* Section 3: Loox-style Sticky Stacking
   Desktop: heading pins at top of viewport; cards stack on top of each other
   (sticky + increasing z-index), each slide covering the previous one.
   Mobile: cards also stack — each one collapses into a thin colored bar at
   the top, leaving a stacked trail behind as you scroll. */
.band-loox { position: relative; }

/* Heading pins under the nav (64px) and stays in place while cards stack. */
.band-loox .band-head {
  position: sticky;
  top: 120px;
  z-index: 0;
  background: var(--paper);
  padding: 0 24px 32px;
  margin: 0 auto;
}

.loox-wrap {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  padding: 0 24px 0;
  margin-top: 32px;
}

.loox-item {
  position: sticky;
  top: 380px; /* heading bottom edge: 64 (nav) + ~276 (h2 + p + padding) */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 50px 60px;
  border-radius: 2.5rem;
  overflow: hidden;
  box-shadow: 0 -12px 30px -18px rgba(11,46,63,0);
  width: 100%;
  transition: transform 0.3s ease;
  /* Scroll runway: the card stays pinned while the next card slides over it.
     margin-bottom = own height + overlap buffer. */
  margin-bottom: 30px;
}

/* Each card layers on top of the previous one. */
.loox-item:nth-child(1) { z-index: 1; }
.loox-item:nth-child(2) { z-index: 2; }
.loox-item:nth-child(3) { z-index: 3; }
.loox-item:nth-child(4) { z-index: 4; }

.loox-txt { max-width: 400px; }
.loox-txt h2 { margin-bottom: 16px; font-size: 32px; line-height: 1.1; }
.loox-txt p { font-size: 16px; color: var(--ink-2); margin-bottom: 24px; }

.loox-media { display: flex; justify-content: center; align-items: center; }
.loox-media .u-phone { max-width: 290px; height: 440px; box-shadow: 0 20px 50px -10px rgba(0,0,0,0.15); border-radius: 28px; overflow: hidden; }

/* Alternating background colors: light to dark, like the Loox palette. */
.loox-item.bg-1 { background: #F9F7F0; }
.loox-item.bg-2 { background: #E3E9E6; }
.loox-item.bg-3 { background: #F7F5EF; }
.loox-item.bg-4 { background: #CFD9D4; }

/* Removed direction: rtl - Loox is consistent Text Left / Media Right */

@media(max-width: 900px) {
  /* Heading scrolls away on phones (Loox mobile behavior); cards stack
     from the very top, each collapsing into a thin colored bar. */
  .band-loox .band-head { position: relative; padding-bottom: 24px; top: 10px; }
  .loox-wrap { padding-bottom: 20px; }
  .loox-item {
    position: sticky;
    top: 84px;
    z-index: 1;
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 32px 20px 24px;
    border-radius: 24px;
    min-height: 380px;
    margin-bottom: 120px;
    box-shadow: 0 -6px 18px -10px rgba(11,46,63,0.25);
  }
  .loox-item:nth-child(2) { z-index: 2; }
  .loox-item:nth-child(3) { z-index: 3; }
  .loox-item:nth-child(4) { z-index: 4; margin-bottom: 0; }
  .loox-txt { max-width: 100%; margin: 0 auto; text-align: left; }
  .loox-media .u-phone { height: 400px; margin: 0 auto; }
  .loox-media { width: 100%; }
  .loox-media > div { max-width: 100% !important; }
}

/* Pricing max-width update */
#pricing .price { max-width: 1180px; margin-left: auto; margin-right: auto; }