/* One stylesheet, no imports, no fonts to fetch. The palette is the client's, so the shop and the app
   look like the same thing without shipping the app's typeface to a browser.

   TWO GROUNDS, THREE SETTINGS. Night is the brand's ground and the default. Light is **cream, never
   white**: `--paper` is the kit's own light tone, and pure white would look like a different product.
   The three settings are Auto, Light and Dark - Auto means "ask the operating system", which is the
   default and keeps no record of anything; choosing Light or Dark sets `data-theme` on <html> and is
   remembered on the device (that choice, and nothing else, is stored).

   The rule the rest of this file follows: nothing is a box. No hard borders; a surface is a soft tint,
   and where something needs an edge it is a hairline at low opacity. The only saturated things are the
   one primary button, the step that is current, and the QR - which has to be light to be scannable.

   Farsi is written right to left, so positions and paddings use logical properties (`inline-start`,
   `margin-inline`) throughout: the same rules then mirror themselves, and nothing needs a second
   stylesheet. */
:root{
  /* Only the colours that do not change between grounds. Everything else is set below, per theme. */
  --crust:#ea8032; --crumb:#f4a15a; --crust-pressed:#d8731e;
  --route:#3e6ae1; --live:#27c46a; --fault:#e2503a;
  --paper:#eae5da; --ink:#161310;
  /* The wash colour of a ground: blue on night, the character's own orange on cream. */
  --accent:62,106,225;
}

/* ---- dark: the brand's ground, and the default ---- */
:root, :root[data-theme="dark"]{
  --bg:#070b14; --fg:#f3f0e8; --dim:#c8c3ba;
  --hair:rgba(243,240,232,.07); --tint:rgba(243,240,232,.035);
  --surface:rgba(243,240,232,.04);
  --accent:62,106,225;
  --field-a:rgba(18,24,42,.95); --field-b:rgba(var(--accent),.42);
  --chosen:rgba(var(--accent),.20);
  --chip:rgba(243,240,232,.05); --chip-on:rgba(var(--accent),.18);
  --raise:rgba(243,240,232,.10);
  --warn-fg:#f6cfc7; --warn-bg:rgba(226,80,58,.14);
}

/* ---- light: cream, not white ---- */
:root[data-theme="light"],
:root.theme-light{
  --bg:#eae5da; --fg:#161310; --dim:#4a453e;
  --hair:rgba(22,19,16,.10); --tint:rgba(22,19,16,.035);
  --surface:rgba(255,255,255,.45);
  --accent:234,128,50;
  --field-a:rgba(255,255,255,.55); --field-b:rgba(var(--accent),.16);
  --chosen:rgba(var(--accent),.12);
  --chip:rgba(22,19,16,.05); --chip-on:rgba(var(--accent),.14);
  --raise:rgba(255,255,255,.80);
  --warn-fg:#7a2a17; --warn-bg:rgba(226,80,58,.12);
}
/* Auto: no `data-theme` at all means "whatever the system says". */
@media (prefers-color-scheme: light){
  :root:not([data-theme]){
    --bg:#eae5da; --fg:#161310; --dim:#4a453e;
    --hair:rgba(22,19,16,.10); --tint:rgba(22,19,16,.035);
    --surface:rgba(255,255,255,.45);
    --accent:234,128,50;
  --field-a:rgba(255,255,255,.55); --field-b:rgba(var(--accent),.16);
    --chosen:rgba(var(--accent),.12);
    --chip:rgba(22,19,16,.05); --chip-on:rgba(var(--accent),.14);
  --raise:rgba(255,255,255,.80);
    --warn-fg:#7a2a17; --warn-bg:rgba(226,80,58,.12);
  }
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

/* The Persian face, served from this origin - the page still fetches no font from anywhere else.
   IRANSans is the face the owner chose for both the app and the page, one weight, and the declaration
   covers 400 to 700 so nothing is synthesised when the page bolds something. The **`unicode-range` is
   what keeps an English visitor from paying for it** - a browser fetches a face only when it has to
   draw one of the characters in the range, and an English page draws none. Latin text inside the Farsi
   page (the wordmark, `EN`, an address, a code) keeps the Latin stack, which is the page's own choice
   rather than a limit of the face: this file does carry Latin, and it is still not asked for it.

   The file is a *prepared* copy - `deploy/prepare-font.py` rewrites the source's `gasp` table, which
   asks a rasterizer to grid-fit from 16 ppem up, and grid-fitting at this page's fractional sizes and
   light weights renders uneven, muddy strokes (measured side by side in Chromium and Firefox). Its own
   family name is `IRANSans`; that is also this stylesheet's name for it, so there is one name and not
   two. Its licence ships with the brand package at `brand/kotlet/fonts/OFL.txt`. */
@font-face{
  font-family:IRANSans;
  src:url("fonts/IRANSans.ttf?v=d6777d316c") format("truetype");
  font-weight:400 700;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+200C-200D,U+FB50-FDFF,U+FE70-FEFF;
}

body{
  background-color:var(--bg); color:var(--fg); min-height:100vh;
  font:16px/1.55 -apple-system,"Segoe UI",system-ui,Roboto,sans-serif;
  background-image:
    radial-gradient(1200px 560px at 50% -8%, var(--field-a) 0%, transparent 72%),
    radial-gradient(1500px 860px at 50% 104%, var(--field-b) 0%, transparent 74%);
  background-repeat:no-repeat;
  background-size:100% 84%, 100% 100%;
  background-position:top center, bottom center;
}
/* Persian needs a little more air and its own face; the Latin wordmark keeps the Latin one, because it
   is a wordmark and not a translated string. */
html[dir="rtl"] body{font-family:IRANSans,"Segoe UI",Tahoma,system-ui,sans-serif;
  line-height:1.75; font-size:16.5px}
.mark{font-family:-apple-system,"Segoe UI",system-ui,Roboto,sans-serif}

/* The mode marks live in the margins, outside the column. A viewport with no margin hides them. */
.ground{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ground .glyph{position:absolute;color:var(--fg);overflow:visible}
.wrap{position:relative;z-index:1;max-width:1000px;margin:0 auto;padding:44px 22px 72px}
.g1{width:72px;height:72px;top:9%;inset-inline-start:calc(50% - 608px);opacity:.208}
.g2{width:96px;height:96px;top:30%;inset-inline-start:calc(50% - 668px);opacity:.156}
.g3{width:58px;height:58px;top:56%;inset-inline-start:calc(50% - 592px);opacity:.195}
.g4{width:78px;height:78px;top:78%;inset-inline-start:calc(50% - 640px);opacity:.143}
.g5{width:88px;height:88px;top:14%;inset-inline-end:calc(50% - 660px);opacity:.169}
.g6{width:64px;height:64px;top:40%;inset-inline-end:calc(50% - 600px);opacity:.208}
.g7{width:52px;height:52px;top:64%;inset-inline-end:calc(50% - 584px);opacity:.169}
.g8{width:84px;height:84px;top:84%;inset-inline-end:calc(50% - 648px);opacity:.13}
.g9{width:70px;height:70px;top:22%;inset-inline-start:calc(50% - 790px);opacity:.117}
.g10{width:76px;height:76px;top:70%;inset-inline-end:calc(50% - 800px);opacity:.117}
@media (max-width:1180px){
  .ground{display:none}
}

header.top{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:18px;position:relative}
/* The bar's own hairline: the mark and the settings belong to one row, and a row that ends in nothing
   is how a header looks unfinished. */
header.top::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;bottom:0;
  height:1px;background:linear-gradient(90deg,transparent,var(--hair) 12%,var(--hair) 88%,transparent)}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit;
  letter-spacing:.42em;font-weight:500;font-size:15px;text-transform:uppercase}
html[dir="rtl"] .mark{letter-spacing:.1em}
.mark img{width:26px;height:26px;display:block}
.quiet{color:var(--dim);font-size:12px;letter-spacing:.16em;text-transform:uppercase}
html[dir="rtl"] .quiet{letter-spacing:0}

/* The settings, as one calm cluster: a capsule of icons for the theme, a hairline, a capsule of letters
   for the language. Icons rather than the words Auto/Light/Dark, because three words repeat what the
   shapes already say, and a header is the last place to spend a sentence. */
.tools{display:flex;align-items:center;gap:10px}
.divider{width:1px;height:18px;background:var(--hair)}
.seg{display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:999px;
  background:var(--chip)}
.seg button{
  height:28px;min-width:30px;padding:0 8px;border:0;border-radius:999px;cursor:pointer;
  background:transparent;color:var(--dim);font:inherit;font-size:11px;letter-spacing:.06em;
  text-transform:none;font-weight:500;display:inline-grid;place-items:center;
  transition:background .18s,color .18s,box-shadow .18s}
.seg button:hover{color:var(--fg);background:transparent}
.seg button[aria-pressed="true"]{background:var(--raise);color:var(--fg);
  box-shadow:inset 0 0 0 1px var(--hair)}
.seg button:active{transform:none;background:var(--raise)}
.seg button svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.5;fill:none;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.seg button svg .solid{fill:currentColor;stroke:none}
html[dir="rtl"] .seg button{font-size:11.5px}
/* The length chips: the same capsule, with words, because one month and six months are not a shape. */
.seg.chips{margin-bottom:22px}
.seg.chips button{height:30px;padding:0 14px;font-size:12px;letter-spacing:.02em}
html[dir="rtl"] .seg.chips button{font-size:12.5px}

.hero{margin:40px 0 0;text-align:center}
/* The character, at the size a sticker wants to be: small enough to be a wink. */
.mascot{display:block;margin:0 auto 22px;width:104px;height:auto;image-rendering:auto}
.ribbon{height:28px;margin:0 auto 16px}
.hero h1{font-weight:500;font-size:36px;line-height:1.2;margin:0 auto 18px;max-width:none;
  letter-spacing:-.01em;text-wrap:balance}
html[dir="rtl"] .hero h1{letter-spacing:0;font-weight:500}
.trial{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:6px;max-width:680px;margin:28px auto 0;padding:20px 28px 18px;
  border-radius:18px;background:var(--crust);color:var(--ink);
  box-shadow:0 24px 50px -28px rgba(234,128,50,.95)}
.trial-spark{position:absolute;width:46px;height:46px;fill:currentColor;opacity:.28;pointer-events:none}
.trial-spark.a{top:-12px;inset-inline-start:-8px}
.trial-spark.b{width:30px;height:30px;bottom:-8px;inset-inline-end:-4px;opacity:.2}
.trial-badge{position:relative;margin:0;color:var(--ink);font-size:30px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;line-height:1.05}
html[dir="rtl"] .trial-badge{letter-spacing:0;text-transform:none;font-size:28px}
.trial-line{position:relative;margin:0;color:var(--ink);font-size:15px;font-weight:600;line-height:1.4;
  max-width:42ch}

/* Plans: a tint and a top hairline instead of a frame. The chosen one is lifted by a soft outer glow
   and a faint blue wash, not by a bright outline. */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:36px 0 0}
.plan{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:16px;padding:16px 14px 14px;
  cursor:pointer;text-align:start;
  background:linear-gradient(180deg,var(--tint),transparent 70%);
  transition:background .25s,box-shadow .25s}
.plan::before{content:"";position:absolute;inset-inline-start:24px;inset-inline-end:24px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 20%,var(--hair) 80%,transparent)}
.plan:hover{background:linear-gradient(180deg,var(--chosen),var(--tint) 70%,transparent)}
.plan.chosen{
  background:
    radial-gradient(420px 240px at 50% -20%, var(--chosen), transparent 70%),
    linear-gradient(180deg,var(--tint),transparent 75%);
  box-shadow:0 40px 110px -70px rgba(var(--accent),.85);
}
.plan.chosen::before{background:linear-gradient(90deg,transparent,rgba(var(--accent),.60),transparent)}
.plan .watermark{position:absolute;width:84px;height:84px;inset-inline-end:-10px;bottom:-16px;
  color:var(--fg);opacity:.104;pointer-events:none}
.plan .regions{color:var(--dim);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase}
html[dir="rtl"] .plan .regions{letter-spacing:0;font-size:12px}
.plan h2{font-weight:600;font-size:17px;margin:6px 0 0}
.plan p{color:var(--dim);font-weight:400;font-size:14px;line-height:1.45;margin:8px 0 12px;flex:1 1 auto}
.plan .price{font-size:23px;font-weight:500}
.plan .price small{font-size:13px;color:var(--dim);font-weight:500}

/* The order bar: four steps, the current one filled. Nothing here is a promise about machinery - it is
   what the buyer does, in order, with one line of explanation under it. */
.order{margin-top:52px;padding-top:38px;position:relative}
.order::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)}
.steps{display:flex;list-style:none;margin:0;padding:0;gap:8px;justify-content:space-between}
.steps li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:9px;
  text-align:center}
/* The connector, drawn from each step to the next: symmetric, so it works in both directions. */
.steps li:not(:last-child) .dot::after{
  content:"";position:absolute;top:50%;height:1px;background:var(--hair);
  inset-inline-start:calc(50% + 17px);inset-inline-end:calc(-50% + 17px);transform:translateY(-50%)}
.steps li.done .dot::after{background:rgba(var(--accent),.45)}
.dot{position:relative;width:34px;height:34px;border-radius:999px;display:grid;place-items:center;
  background:var(--chip);color:var(--dim);font-size:13px;font-weight:500;
  transition:background .25s,color .25s,box-shadow .25s}
.steps li.on .dot{background:var(--crust);color:var(--ink);box-shadow:0 18px 40px -22px rgba(234,128,50,.9)}
.steps li.done .dot{background:var(--chip-on);color:var(--fg)}
.steps .title{font-size:13px;font-weight:500;color:var(--dim)}
.steps li.on .title{color:var(--fg)}
.hint{margin:20px auto 0;text-align:center;color:var(--dim);font-size:14.5px;font-weight:400;max-width:56ch}

/* Choose, pay, done: no panel, no chrome. */
.checkout{margin-top:38px;padding-top:34px;position:relative;text-align:center}
.checkout::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)}
.line{color:var(--dim);font-size:14.5px;font-weight:400;margin-bottom:20px}
.line b{color:var(--fg);font-weight:600}
.buttons{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
button{font:inherit;font-size:13px;letter-spacing:.12em;text-transform:uppercase;
  padding:13px 21px;border-radius:11px;border:0;background:var(--crust);color:var(--ink);
  cursor:pointer;font-weight:500;transition:background .18s,filter .18s}
html[dir="rtl"] button{letter-spacing:0;font-size:13px}
/* The kit's own two states for the one button: crumb on hover, crust-pressed on press, ink label in
   every one of them. */
button:hover{background:var(--crumb)}
button.ghost{background:var(--chip);color:var(--fg);font-weight:400}
button.ghost:hover{background:var(--chip-on)}
button:active{background:var(--crust-pressed);transform:translateY(1px)}
button[disabled]{opacity:.7;cursor:default}
.codes{margin:14px auto 0;color:var(--dim);font-size:13.5px;font-weight:400;max-width:52ch}
.codes[hidden]{display:none}
.status{margin-top:16px;color:var(--dim);font-size:14px;font-weight:400;min-height:18px}
.status.ok{color:var(--live)}

/* The fallback: the address and its QR, side by side, only ever unhidden when it is the answer. */
.manual{margin:26px auto 0;max-width:720px;display:grid;grid-template-columns:1fr 186px;gap:26px;
  text-align:start;align-items:start}
html[dir="rtl"] .manual{grid-template-columns:186px 1fr}
.manual[hidden]{display:none}
.rail{font:inherit;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--chip);color:var(--dim);border:0;border-radius:999px;
  padding:9px 15px;cursor:pointer;transition:background .2s,color .2s}
html[dir="rtl"] .rail{letter-spacing:0;font-size:13px}
.rail.on{color:var(--fg);background:var(--chip-on)}
.rails{display:flex;gap:8px;margin-bottom:18px}
.field-label{color:var(--dim);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:10px}
html[dir="rtl"] .field-label{letter-spacing:0;font-size:12.5px}
.addr{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13.5px;color:var(--fg);
  border-radius:12px;padding:14px 15px;background:var(--surface);word-break:break-all;direction:ltr;
  text-align:start}
.warn{margin-top:14px;padding:11px 13px;border-radius:11px;font-size:13px;
  color:var(--warn-fg);background:var(--warn-bg)}
.note{color:var(--dim);font-size:13.5px;font-weight:400;margin:18px 0 0;max-width:52ch}

/* The one thing on the page that has to be light: a QR needs a quiet zone, and dark-on-dark does not
   scan. Paper is the kit's light, so the one light surface is still the client's. */
.qrbox{display:flex;flex-direction:column;align-items:center}
.qr{width:186px;height:186px;border-radius:14px;padding:11px;background:var(--paper);
  box-shadow:0 30px 90px -60px rgba(var(--accent),.9)}
.qr[hidden]{display:none}
.qr svg{width:100%;height:100%;display:block}

/* Installing: the same hairline as the rest, because a panel would make it look like a warning. It is
   not one - it is what the phone will show, and saying it here is the difference between a buyer who
   knows what to tap and one who thinks they have been handed something bad. */
.install{margin-top:52px;padding-top:34px;position:relative;max-width:64ch}
.install::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)}
.install h3{margin:0 0 14px;font-size:12px;letter-spacing:.2em;color:var(--dim);
  text-transform:uppercase;font-weight:400}
html[dir="rtl"] .install h3{letter-spacing:0;font-size:13px}
.install p{color:var(--dim);font-size:14px;font-weight:400;margin:0 0 10px}
.install b{color:var(--fg);font-weight:400}

/* The clients. Five plates in a row: the one that exists is tinted with the ground's accent and is a
   link; the others are quiet and say when, rather than being links that go nowhere. */
.downloads{margin-top:52px;padding-top:34px;position:relative}
.downloads::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)}
.downloads h3{margin:0 0 18px;font-size:12px;letter-spacing:.2em;color:var(--dim);
  text-transform:uppercase;font-weight:400}
html[dir="rtl"] .downloads h3{letter-spacing:0;font-size:13px}
.plates{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
/* The 32-bit build, when the shop ships two. Small print on purpose: it is the answer for a minority
   of phones, and a second download button beside the first would make every buyer choose. */
.alt{margin:14px 0 0;font-size:13px;color:var(--dim);font-weight:400}
.alt a{color:var(--fg);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:2px}
.alt a:hover{border-bottom-color:var(--fg)}
.alt .meta{margin-inline-start:8px;color:var(--dim);font-size:11.5px;letter-spacing:.06em}
.plate{display:flex;flex-direction:column;gap:6px;padding:14px 12px;border-radius:14px;
  background:var(--tint);text-decoration:none;color:var(--dim);transition:background .2s,color .2s}
.plate .os{width:28px;height:28px;color:var(--fg)}
.plate .name{font-size:14px;color:var(--fg);font-weight:500}
.plate .meta{font-size:12px;color:var(--dim);letter-spacing:.04em;font-weight:500}
html[dir="rtl"] .plate .meta{letter-spacing:0;font-size:12.5px}
.plate.ready{background:var(--chosen)}
.plate.ready:hover{background:rgba(var(--accent),.24)}
.plate.ready .meta{color:var(--fg)}
.plate.soon{opacity:.72}
.plate:active{transform:none}
.get-row{text-align:center;margin:22px 0 0}
a.get{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:13px 22px;border-radius:11px;
  background:var(--crust);color:var(--ink);text-decoration:none}
a.get svg{width:16px;height:16px}
a.get:hover{background:var(--crumb)}
a.get:active{background:var(--crust-pressed)}
html[dir="rtl"] a.get{letter-spacing:0;text-transform:none;font-size:14px}
a.get[hidden]{display:none}
@media (max-width:720px){
  /* Two columns when they cannot be five: the row is a list of platforms, and wrapping is how a list
     of five behaves on a phone. */
  .plates{grid-template-columns:repeat(2,1fr)}
  .plate:last-child{grid-column:span 2}
}

footer{margin-top:72px;padding-top:22px;color:var(--dim);font-size:12px;position:relative;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
footer::before{content:"";position:absolute;inset-inline-start:0;inset-inline-end:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,var(--hair) 15%,var(--hair) 85%,transparent)}

@media (max-width:720px){
  .hero h1{font-size:26px;max-width:16em}
  .trial-badge{font-size:24px}
  .ribbon{height:22px}
  .plans{grid-template-columns:1fr}
  /* The steps stay in a row - they are a sequence, and stacking them would read as a list of options -
     but the words shrink and the connector gets shorter. */
  .steps{gap:4px}
  .steps .title{font-size:11.5px}
  .dot{width:30px;height:30px;font-size:12px}
  .steps li:not(:last-child) .dot::after{inset-inline-start:calc(50% + 15px);inset-inline-end:calc(-50% + 15px)}
  .manual,html[dir="rtl"] .manual{grid-template-columns:1fr}
  .qrbox{align-items:flex-start}
  footer{flex-direction:column;gap:8px}
}