/* Qadam Studio pages: one stylesheet for qadam.studio and every app page (QDM-31).
   Each page sets its own palette on :root (from src/apps.json); nothing here names an app's colour.
   Grid, scale and ease come from the Gallery site (qadam-studio/site/index.html). */
:root{
  --sans:"Instrument Sans","IBM Plex Sans Arabic",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --ar:"IBM Plex Sans Arabic","Geeza Pro",sans-serif;
  --rounded:ui-rounded,"SF Pro Rounded",var(--sans);
  --serif:ui-serif,"New York",Georgia,serif;
  --ease:cubic-bezier(.32,.72,0,1);--ease-out:cubic-bezier(.25,1,.5,1);
  --pad:64px;--gap:24px;--part:160px;
  --soft:0 1px 2px rgba(var(--shadow),.05),0 8px 24px -12px rgba(var(--shadow),.14);
  --lift:0 1px 2px rgba(var(--shadow),.06),0 28px 48px -28px rgba(var(--shadow),.35)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 18px/1.55 var(--sans);-webkit-font-smoothing:antialiased;
  font-kerning:normal;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:8px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--pad)}
.ar{font-family:var(--ar);font-weight:500}
.hide{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:2;background:var(--btn);color:var(--on);padding:12px 20px;border-radius:999px;font-weight:600}
.skip:focus{top:16px}

/* header and footer: the studio's wordmark, the same on every page */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:96px}
.mark{display:inline-flex;align-items:baseline;gap:10px;font-weight:600;font-size:22px;letter-spacing:-.02em;padding:10px 0}
.mark .ar{font-size:21px;color:var(--quiet);letter-spacing:0}
.top nav{display:flex;gap:28px}
.top nav a{font-size:16px;font-weight:500;color:var(--quiet);padding:12px 0}
.top nav a:hover{color:var(--ink)}

/* the pieces every page shares */
.h2{font-weight:600;font-size:56px;line-height:1.02;letter-spacing:-.035em;text-wrap:balance}
.h2-small{font-size:40px;letter-spacing:-.03em}
.go{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:0 28px;border-radius:28px;
  background:var(--btn);color:var(--on);font-size:17px;font-weight:600;white-space:nowrap;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.go:hover{box-shadow:0 12px 28px -14px var(--btn)}
.go:active{transform:scale(.97)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:32px;padding:0 14px 0 12px;border-radius:16px;white-space:nowrap;
  background:var(--chip);color:var(--chipInk);font-size:15px;font-weight:600;line-height:1}
.chip i{width:8px;height:8px;border-radius:50%;background:currentColor}
.cta{display:flex;align-items:center;flex-wrap:wrap;gap:16px 20px}

/* the stage: the app's accent block, with its phone standing in it */
.stage{position:relative;display:grid;place-items:center;background:var(--stage);border-radius:40px;padding:56px 40px;overflow:hidden}
.stage .device{width:min(100%,300px);filter:drop-shadow(0 30px 36px rgba(0,0,0,.28))}
.stage.ipad .device{width:min(100%,460px)}
.stage .np{width:min(100%,300px)}
.stage .duo{width:min(100%,480px)}
.hero .stage.drawn{padding-top:76px}
.sample{position:absolute;left:20px;top:20px;z-index:1;min-height:28px;padding:0 12px;border-radius:14px;display:inline-flex;align-items:center;
  background:rgba(255,255,255,.92);color:#2A1418;font-size:13px;font-weight:600;line-height:1}

/* app page: hero */
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;padding-top:32px}
.hero .say{grid-column:1/7}
.hero .stage{grid-column:7/13}
.appicon{width:96px;height:96px;border-radius:22.4%;box-shadow:0 0 0 1px rgba(var(--shadow),.08),0 14px 28px -16px rgba(var(--shadow),.45)}
.hero h1{margin-top:36px;color:var(--accent);font-weight:600;font-size:clamp(56px,7.6vw,112px);line-height:.96;letter-spacing:-.045em;text-wrap:balance}
.job{margin-top:28px;font-size:24px;line-height:1.4;max-width:19em;text-wrap:pretty}
.hero .cta{margin-top:40px}
.free{margin-top:20px;font-size:15px;color:var(--quiet)}

/* the one moment: the phone rises into its stage once */
.hero .stage .device,.hero .stage .np{animation:rise .9s var(--ease-out) .25s both}
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}

/* sections */
.part{padding-top:var(--part)}
.head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.head .h2{grid-column:1/8}
.head .side{grid-column:8/13}
.side p{font-size:22px;line-height:1.45;color:var(--quiet);max-width:24em;text-wrap:pretty}
.side .go{margin-top:28px}

/* three steps of the day, in order, joined by one line: the family's path (a qadam is a step) */
.steps{margin-top:64px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap)}
.steps li{position:relative;padding:84px 24px 0 0}
.steps li::before{content:"";position:absolute;left:68px;right:calc(12px - var(--gap));top:27px;height:2px;border-radius:1px;background:var(--chip)}
.steps li:last-child::before{display:none}
.num{position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  box-shadow:inset 0 0 0 2px var(--accent);color:var(--accent);font-weight:600;font-size:24px;line-height:1;font-variant-numeric:tabular-nums}
.steps h3{font-weight:600;font-size:26px;line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.steps p{margin-top:12px;font-size:18px;line-height:1.55;color:var(--quiet);max-width:24em;text-wrap:pretty}

/* what we never do, with the tip card */
.promise{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:center;
  background:var(--wash);color:var(--washInk);border-radius:40px;padding:72px 64px}
.never{grid-column:1/8}
.never ul{margin-top:40px;display:grid;row-gap:22px}
.never li{position:relative;padding-left:44px;font-size:24px;line-height:1.35;font-weight:600;letter-spacing:-.015em;max-width:22em;text-wrap:pretty}
.never li::before{content:"";position:absolute;left:0;top:.2em;width:24px;height:24px;border-radius:50%;
  border:2px solid var(--chipInk);background:linear-gradient(135deg,transparent calc(50% - 1px),var(--chipInk) calc(50% - 1px),var(--chipInk) calc(50% + 1px),transparent calc(50% + 1px))}
.tipcard{grid-column:9/13;background:var(--card);color:var(--cardInk);border-radius:28px;padding:40px;box-shadow:var(--soft)}
.tipcard h3{font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.02em}
.tipcard p{margin-top:14px;font-size:17px;line-height:1.55;color:var(--cardQuiet)}

/* the other apps */
.more{margin-top:48px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.tile{display:flex;flex-direction:column;height:100%;background:var(--tile);color:var(--tileInk);border-radius:28px;padding:28px;box-shadow:var(--soft);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.tile img{width:64px;height:64px;border-radius:22.4%;box-shadow:0 0 0 1px rgba(var(--shadow),.08)}
.tile h3{margin-top:20px;font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.015em}
.tile p{margin-top:6px;font-size:15px;line-height:1.45;color:var(--tileQuiet);flex:1}
.tile .where{margin-top:18px;font-size:14px;color:var(--tileQuiet)}
div.tile{background:transparent;box-shadow:inset 0 0 0 1px var(--line)}
a.tile .where{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
a.tile:hover{transform:translateY(-4px);box-shadow:var(--lift)}

/* footer */
.foot{margin-top:var(--part)}
.foot-in{display:flex;align-items:center;justify-content:space-between;gap:12px 32px;flex-wrap:wrap;border-top:1px solid var(--line);padding:32px 0 56px}
.foot .meta{display:flex;align-items:center;flex-wrap:wrap;gap:4px 28px;font-size:15px;color:var(--quiet)}
.foot .meta a{padding:12px 0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--line)}
.foot .meta a:hover{color:var(--ink);text-decoration-color:currentColor}

/* studio page (the Gallery) */
.hero-studio{display:block;padding-top:88px}
.hero-studio h1{font-weight:600;font-size:clamp(44px,7.25vw,104px);line-height:.98;letter-spacing:-.045em;max-width:12.5em;text-wrap:balance}
.lede{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);margin-top:48px;align-items:center}
.lede-text{grid-column:1/7;font-size:22px;line-height:1.45;color:var(--quiet);max-width:21em;text-wrap:balance}
.lede .cta{grid-column:8/13}
.wall-part{padding-top:112px}
.wall{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:56px var(--gap)}
.card{display:block;border-radius:24px}
.stage.mini{display:block;aspect-ratio:4/5;padding:0;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(22,23,27,.04);
  transition:transform .6s var(--ease),box-shadow .6s var(--ease)}
.stage.mini .device,.stage.mini .np{position:absolute;left:50%;top:13%;width:64%;transform:translateX(-50%);filter:drop-shadow(0 18px 24px rgba(0,0,0,.25))}
.stage.mini.ipad .device{width:86%;top:16%}
.stage.mini .duo{width:84%;top:12%}
.stage.mini .bigicon{position:absolute;left:50%;top:50%;width:44%;transform:translate(-50%,-50%);border-radius:22.4%;box-shadow:0 0 0 1px rgba(22,23,27,.06),0 20px 32px -18px rgba(42,32,23,.45)}
.stage.mini .sample{left:14px;top:14px}
a.card:hover .stage.mini{transform:translateY(-6px);box-shadow:inset 0 0 0 1px rgba(22,23,27,.04),0 32px 48px -30px rgba(22,23,27,.45)}
a.card:hover .label span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.card .label{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:17px;font-weight:600;letter-spacing:-.01em}
.card .label img{width:32px;height:32px;border-radius:22.4%;box-shadow:0 0 0 1px rgba(22,23,27,.06)}
.card .line{margin-top:8px;font-size:15px;line-height:1.45;color:var(--quiet);max-width:22em}
.card .where{margin-top:8px;font-size:14px;color:var(--quiet)}
a.card .where{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--line)}
.promises ul{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
.promises h3{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
.promises p{margin-top:10px;font-size:17px;line-height:1.5;color:var(--quiet);max-width:16em;text-wrap:pretty}

/* The drawn phones, each marked "Sample screen" on the page (the board says why each approved PNG is not used).
   Sized in container units, so one drawing serves the hero, the studio wall and the link preview. 1u = 1 point of a 402 point phone.
   .np is the shared phone (A Name a Day's colours by default); .kal, .sir, .sdq and .hrf set their app's own colours. */
.np{--p-bg:#FBF6F4;--p-ink:#2A1418;--p-quiet:#7A5A60;--p-line:rgba(42,20,24,.08);container-type:inline-size;aspect-ratio:402/874}
.np-in{--u:calc(100cqw / 402);position:relative;height:100%;overflow:hidden;background:var(--p-bg);color:var(--p-ink);border-radius:calc(59 * var(--u));
  box-shadow:inset 0 0 0 calc(2 * var(--u)) var(--p-line);padding:0 calc(16 * var(--u));font-family:-apple-system,BlinkMacSystemFont,var(--sans)}
.np-status{display:flex;align-items:center;height:calc(54 * var(--u));padding:calc(10 * var(--u)) calc(20 * var(--u)) 0;font-weight:600;font-size:calc(17 * var(--u))}
.np-status span:first-child{flex:1}
.np-sig{display:flex;align-items:flex-end;gap:calc(2 * var(--u));height:calc(12 * var(--u));margin-right:calc(8 * var(--u))}
.np-sig i{display:block;width:calc(3 * var(--u));background:currentColor;border-radius:calc(1 * var(--u))}
.np-sig i:nth-child(1){height:40%}.np-sig i:nth-child(2){height:60%}.np-sig i:nth-child(3){height:80%}.np-sig i:nth-child(4){height:100%}
.np-batt{width:calc(25 * var(--u));height:calc(12 * var(--u));border-radius:calc(4 * var(--u));background:currentColor}
.np-date{margin-top:calc(12 * var(--u));padding-left:calc(4 * var(--u));font-size:calc(15 * var(--u));line-height:1.3;color:var(--p-quiet)}
.np-title{padding-left:calc(4 * var(--u));font-family:var(--rounded);font-weight:700;font-size:calc(31 * var(--u));line-height:1.2;letter-spacing:-.01em}
.np-card{position:relative;margin-top:calc(18 * var(--u));height:calc(414 * var(--u));border-radius:calc(28 * var(--u));overflow:hidden;color:#fff;text-align:center;
  background:linear-gradient(180deg,#B32C4A,#8F2038);box-shadow:0 calc(14 * var(--u)) calc(28 * var(--u)) calc(-12 * var(--u)) rgba(143,32,56,.55);
  display:flex;flex-direction:column;align-items:center;padding-top:calc(150 * var(--u))}
.np-star,.np-star::after{position:absolute;left:50%;top:calc(104 * var(--u));width:calc(150 * var(--u));height:calc(150 * var(--u));margin-left:calc(-75 * var(--u));
  border:calc(2 * var(--u)) solid rgba(255,255,255,.13);border-radius:calc(6 * var(--u));transform:rotate(45deg)}
.np-star::after{content:"";left:0;top:0;margin:calc(-2 * var(--u)) 0 0 calc(-2 * var(--u));transform:rotate(45deg)}
.np-name{position:relative;font-family:var(--rounded);font-weight:700;font-size:calc(34 * var(--u));line-height:1.1;letter-spacing:-.01em}
.np-mean{position:relative;margin-top:calc(6 * var(--u));font-family:var(--serif);font-style:italic;font-size:calc(21 * var(--u));line-height:1.3;opacity:.92}
.np-draft{position:relative;margin-top:calc(14 * var(--u));font-size:calc(13 * var(--u));opacity:.78}
.np-btns{position:absolute;left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(16 * var(--u));display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--u))}
.np-btns span{height:calc(48 * var(--u));border-radius:calc(24 * var(--u));background:rgba(255,255,255,.16);display:grid;place-items:center;font-weight:600;font-size:calc(16 * var(--u))}
.np-row{display:flex;align-items:center;gap:calc(12 * var(--u));margin-top:calc(14 * var(--u));height:calc(70 * var(--u));padding:0 calc(16 * var(--u));
  background:#fff;border-radius:calc(22 * var(--u));box-shadow:0 1px 2px rgba(42,20,24,.05),0 calc(8 * var(--u)) calc(24 * var(--u)) calc(-12 * var(--u)) rgba(42,20,24,.14)}
.np-book{flex:none;width:calc(40 * var(--u));height:calc(40 * var(--u));border-radius:calc(12 * var(--u));background:#F7E3E7;position:relative}
.np-book::before{content:"";position:absolute;inset:calc(12 * var(--u)) calc(10 * var(--u));border:calc(2 * var(--u)) solid #A3243F;border-radius:calc(2 * var(--u))}
.np-book::after{content:"";position:absolute;left:50%;top:calc(12 * var(--u));bottom:calc(12 * var(--u));width:calc(2 * var(--u));margin-left:calc(-1 * var(--u));background:#A3243F}
.np-where{flex:1;display:flex;flex-direction:column}
.np-where small{font-size:calc(13 * var(--u));color:#7A5A60;font-weight:500}
.np-where b{font-size:calc(17 * var(--u));font-weight:600}
.np-chev{width:calc(9 * var(--u));height:calc(9 * var(--u));border-top:calc(2 * var(--u)) solid #B9A3A8;border-right:calc(2 * var(--u)) solid #B9A3A8;transform:rotate(45deg)}
.np-day{display:grid;grid-template-columns:1fr auto;align-content:center;row-gap:calc(10 * var(--u));height:auto;padding:calc(14 * var(--u)) calc(16 * var(--u))}
.np-day b{font-size:calc(16 * var(--u));font-weight:700}
.np-day small{font-size:calc(13 * var(--u));color:#7A5A60}
.np-bar{grid-column:1/3;height:calc(8 * var(--u));border-radius:calc(4 * var(--u));background:#F7E3E7;overflow:hidden}
.np-bar i{display:block;width:12.12%;height:100%;border-radius:inherit;background:#A3243F}
.np-home{position:absolute;left:50%;bottom:calc(9 * var(--u));width:calc(134 * var(--u));height:calc(5 * var(--u));margin-left:calc(-67 * var(--u));border-radius:calc(3 * var(--u));background:currentColor}

/* the parts the drawn phones share: line icons, a white card, the tab bar, the draft label */
.np svg.i,.hp svg.i{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.dp-card{background:#fff;border-radius:calc(28 * var(--u));box-shadow:0 1px 2px var(--p-line),0 calc(12 * var(--u)) calc(30 * var(--u)) calc(-16 * var(--u)) var(--p-glow)}
.dp-draft{font-size:calc(13 * var(--u));line-height:1.3;color:var(--p-quiet)}
.dp-lbl{font-size:calc(13 * var(--u));font-weight:600;color:var(--p-quiet)}
.dp-tab{position:absolute;left:50%;bottom:calc(30 * var(--u));width:calc(230 * var(--u));height:calc(62 * var(--u));margin-left:calc(-115 * var(--u));
  display:grid;grid-template-columns:1fr 1fr;align-items:center;padding:0 calc(6 * var(--u));border-radius:calc(31 * var(--u));background:rgba(255,255,255,.93);
  box-shadow:0 0 0 1px var(--p-line),0 calc(10 * var(--u)) calc(30 * var(--u)) calc(-10 * var(--u)) var(--p-glow)}
.dp-tab span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(2 * var(--u));height:calc(50 * var(--u));
  border-radius:calc(25 * var(--u));font-size:calc(11 * var(--u));font-weight:600;color:var(--p-quiet)}
.dp-tab span.on{color:var(--p-accent);background:var(--p-wash)}
.dp-tab svg.i{width:calc(22 * var(--u));height:calc(22 * var(--u))}

/* Kalimah: a word as it stands in its ayah, in transliteration and English only, and no root letters (not in version 1) */
.np.kal{--p-bg:#F6F2F5;--p-ink:#2B1C27;--p-quiet:#6E5A68;--p-line:rgba(43,28,39,.08);--p-glow:rgba(91,42,78,.2);--p-accent:#5B2A4E;--p-wash:#EBDDE6}
.kw-card{margin-top:calc(18 * var(--u));height:calc(456 * var(--u));display:flex;flex-direction:column;text-align:center;padding:0 calc(22 * var(--u)) calc(26 * var(--u))}
.kw-top{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.kw-word{font-family:var(--rounded);font-weight:700;font-size:calc(56 * var(--u));line-height:1.1;letter-spacing:-.015em;color:#5B2A4E}
.kw-mean{margin-top:calc(8 * var(--u));font-size:calc(21 * var(--u));line-height:1.3;color:var(--p-quiet)}
.kw-card .dp-draft{margin-top:calc(16 * var(--u))}
.kw-card hr{border:0;height:calc(1 * var(--u));background:var(--p-line);margin:0 0 calc(18 * var(--u))}
.kw-ref{margin-top:calc(4 * var(--u));font-size:calc(17 * var(--u));font-weight:600}
.kw-say{position:absolute;left:calc(20 * var(--u));right:calc(20 * var(--u));bottom:calc(108 * var(--u));height:calc(54 * var(--u));border-radius:calc(27 * var(--u));
  display:flex;align-items:center;justify-content:center;gap:calc(9 * var(--u));background:#5B2A4E;color:#fff;font-size:calc(17 * var(--u));font-weight:600}
.kw-say svg.i{width:calc(21 * var(--u));height:calc(21 * var(--u))}

/* Seerah: neutral placeholders, because no story title has been checked yet */
.np.sir{--p-bg:#E4E9EF;--p-ink:#1A2230;--p-quiet:#556070;--p-line:rgba(26,34,48,.08);--p-glow:rgba(46,59,82,.3);--p-accent:#2E3B52;--p-wash:#E4E9EF}
.sr-card{margin-top:calc(18 * var(--u));overflow:hidden}
.sr-pic{display:block;width:100%;height:calc(232 * var(--u))}
.sr-tb{padding:calc(18 * var(--u)) calc(20 * var(--u)) calc(20 * var(--u))}
.sr-t{font-family:var(--rounded);font-weight:700;font-size:calc(26 * var(--u));line-height:1.2;letter-spacing:-.01em}
.sr-sub{margin-top:calc(4 * var(--u));font-size:calc(16 * var(--u));line-height:1.35;color:var(--p-quiet)}
.sr-meta{display:flex;align-items:center;gap:calc(6 * var(--u));margin-top:calc(10 * var(--u));font-size:calc(14.5 * var(--u));font-weight:500;color:var(--p-quiet)}
.sr-meta svg.i{width:calc(16 * var(--u));height:calc(16 * var(--u))}
.sr-btn{display:flex;align-items:center;justify-content:center;height:calc(50 * var(--u));margin-top:calc(16 * var(--u));border-radius:calc(25 * var(--u));
  background:#2E3B52;color:#fff;font-size:calc(17 * var(--u));font-weight:600}
.np.sir .dp-lbl{margin:calc(22 * var(--u)) 0 0 calc(8 * var(--u))}
.sr-row{display:flex;align-items:center;gap:calc(14 * var(--u));margin-top:calc(10 * var(--u));padding:calc(14 * var(--u));border-radius:calc(22 * var(--u))}
.sr-th{flex:none;display:block;width:calc(58 * var(--u));height:calc(58 * var(--u));border-radius:calc(16 * var(--u))}
.sr-row b{display:block;font-size:calc(16.5 * var(--u));line-height:1.3;font-weight:600}
.sr-row .sr-meta{margin-top:calc(2 * var(--u))}

/* Sadaqa: the approved jar, in the deeper sky #1C6FAD, spelt "Sadaqa" */
.np.sdq{--p-bg:#F4F8FB;--p-ink:#12283B;--p-quiet:#5A7184;--p-line:rgba(18,40,59,.08);--p-glow:rgba(28,111,173,.3);--p-accent:#1C6FAD;--p-wash:#DDEFFA}
.sq-hero{display:flex;align-items:center;gap:calc(18 * var(--u));margin-top:calc(18 * var(--u));height:calc(248 * var(--u));padding:0 calc(26 * var(--u)) 0 calc(22 * var(--u))}
.sq-jar{flex:none;display:block;width:calc(160 * var(--u));height:calc(200 * var(--u))}
.sq-hero b{display:block;font-family:var(--rounded);font-weight:700;font-size:calc(88 * var(--u));line-height:1;letter-spacing:-.02em;color:#1C6FAD;font-variant-numeric:tabular-nums}
.sq-hero span{display:block;margin-top:calc(4 * var(--u));font-family:var(--rounded);font-size:calc(20 * var(--u));font-weight:600;color:var(--p-quiet)}
.sq-hero small{display:block;margin-top:calc(14 * var(--u));font-size:calc(14 * var(--u));line-height:1.36;color:var(--p-quiet)}
.sq-add{display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));height:calc(56 * var(--u));margin-top:calc(18 * var(--u));border-radius:calc(28 * var(--u));
  background:#1C6FAD;color:#fff;font-size:calc(17 * var(--u));font-weight:600}
.sq-add svg.i{width:calc(22 * var(--u));height:calc(22 * var(--u));stroke-width:2.4}
.np.sdq .dp-lbl{margin:calc(28 * var(--u)) 0 calc(10 * var(--u)) calc(8 * var(--u))}
.sq-log{padding:calc(4 * var(--u)) 0}
.sq-log p{display:flex;align-items:center;gap:calc(12 * var(--u));padding:calc(13 * var(--u)) calc(16 * var(--u))}
.sq-log p+p{border-top:calc(1 * var(--u)) solid var(--p-line)}
.sq-ic{flex:none;display:grid;place-items:center;width:calc(42 * var(--u));height:calc(42 * var(--u));border-radius:calc(14 * var(--u));background:#DDEFFA;color:#1C6FAD}
.sq-ic svg.i{width:calc(22 * var(--u));height:calc(22 * var(--u))}
.sq-log b{flex:1;font-size:calc(16 * var(--u));line-height:1.3;font-weight:500;letter-spacing:-.01em;white-space:nowrap}
.sq-log small{flex:none;font-size:calc(14 * var(--u));color:var(--p-quiet)}
.sq-priv{position:absolute;left:0;right:0;bottom:calc(46 * var(--u));display:flex;align-items:center;justify-content:center;gap:calc(8 * var(--u));
  font-size:calc(15 * var(--u));font-weight:500;color:var(--p-quiet)}
.sq-priv svg.i{width:calc(18 * var(--u));height:calc(18 * var(--u));color:#1C6FAD}

/* Harf: the approved iPad trace screen redrawn, and an iPhone beside it (decision 2), saying "Start at number 1", with no sound button.
   The guide is drawn along the letter's own centre line from the approved mock, so no letter is typed. 1u on the iPad = 1 point of 1032. */
.duo{position:relative;container-type:inline-size;aspect-ratio:100/104}
.duo .hp{position:absolute;left:0;top:0;width:76%}
/* the iPhone keeps its place in the pair wherever the stage rules for a lone phone would move it */
.duo .np.hrf{position:absolute;left:auto;top:auto;right:0;bottom:0;width:29%;transform:none;filter:none;animation:none}
.hp{container-type:inline-size;aspect-ratio:1032/1376}
.hp-in{--u:calc(100cqw / 1032);position:relative;height:100%;overflow:hidden;background:#FFF6F2;color:#3A1624;border-radius:calc(37 * var(--u));
  box-shadow:inset 0 0 0 calc(2 * var(--u)) rgba(58,22,36,.08);font-family:-apple-system,BlinkMacSystemFont,var(--sans)}
.hp-status{display:flex;align-items:center;justify-content:space-between;height:calc(32 * var(--u));padding:0 calc(24 * var(--u));font-size:calc(15 * var(--u));font-weight:600}
.hp-status span{display:flex;align-items:center;gap:calc(8 * var(--u))}
.np.hrf{--p-bg:#FFF6F2;--p-ink:#3A1624;--p-quiet:#8A6470;--p-line:rgba(58,22,36,.08)}
.hf-bar{position:absolute;display:grid;align-items:center;justify-items:center}
.hf-bar .hf-cb{justify-self:start}
.hf-cb{display:grid;place-items:center;border-radius:50%;background:#fff;color:#3A1624;box-shadow:0 0 0 1px rgba(58,22,36,.08),0 calc(6 * var(--u)) calc(18 * var(--u)) calc(-8 * var(--u)) rgba(229,84,122,.35)}
.hf-pg{display:flex;align-items:center;background:#fff;font-family:var(--rounded);font-weight:700;white-space:nowrap;box-shadow:0 0 0 1px rgba(58,22,36,.08)}
.hf-pg i{position:relative;display:block;background:#FDE3EA;overflow:hidden}
.hf-pg i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4%;min-width:30%;max-width:12px;border-radius:inherit;background:#E5547A}
.hf-trace{position:absolute;background:#fff;overflow:hidden;box-shadow:0 1px 2px rgba(58,22,36,.04),0 calc(30 * var(--u)) calc(60 * var(--u)) calc(-36 * var(--u)) rgba(229,84,122,.45)}
.hf-trace svg{position:absolute;inset:0;width:100%;height:100%}
.hf-nm{position:absolute;left:0;right:0;text-align:center;font-family:var(--rounded)}
.hf-nm b{display:block;font-weight:800;color:#E5547A;letter-spacing:-.01em}
.hf-nm span{display:block;font-weight:600;color:#8A6470}
.hf-btns{position:absolute;display:flex;justify-content:center;font-family:var(--rounded);font-weight:700}
.hf-btns span{display:flex;align-items:center;justify-content:center;white-space:nowrap}
.hf-btns .sec{background:#FDE3EA;color:#B8345C}
.hf-btns .pri{background:#E5547A;color:#fff;box-shadow:0 calc(14 * var(--u)) calc(30 * var(--u)) calc(-14 * var(--u)) rgba(229,84,122,.8)}
/* iPad sizes, from the approved mock */
.hp .hf-bar{top:calc(56 * var(--u));left:calc(56 * var(--u));right:calc(56 * var(--u));height:calc(64 * var(--u));grid-template-columns:calc(64 * var(--u)) 1fr calc(64 * var(--u))}
.hp .hf-cb{width:calc(64 * var(--u));height:calc(64 * var(--u))}
.hp .hf-cb svg.i{width:calc(28 * var(--u));height:calc(28 * var(--u));stroke-width:2.2}
.hp .hf-pg{gap:calc(16 * var(--u));height:calc(56 * var(--u));padding:0 calc(26 * var(--u));border-radius:calc(28 * var(--u));font-size:calc(22 * var(--u))}
.hp .hf-pg i{width:calc(220 * var(--u));height:calc(12 * var(--u));border-radius:calc(6 * var(--u))}
.hp .hf-trace{top:calc(148 * var(--u));left:calc(56 * var(--u));right:calc(56 * var(--u));height:calc(780 * var(--u));border-radius:calc(56 * var(--u))}
.hp .hf-nm{top:calc(966 * var(--u))}
.hp .hf-nm b{font-size:calc(104 * var(--u));line-height:calc(112 * var(--u))}
.hp .hf-nm span{font-size:calc(24 * var(--u))}
.hp .hf-btns{left:0;right:0;bottom:calc(64 * var(--u));gap:calc(20 * var(--u))}
.hp .hf-btns span{gap:calc(14 * var(--u));height:calc(84 * var(--u));padding:0 calc(44 * var(--u));border-radius:calc(42 * var(--u));font-size:calc(28 * var(--u))}
.hp .hf-btns svg.i{width:calc(32 * var(--u));height:calc(32 * var(--u));stroke-width:2.4}
.hp .np-batt{background:currentColor}
.hp .np-home{width:calc(300 * var(--u));margin-left:calc(-150 * var(--u))}
/* iPhone sizes: the same parts on a 402 point phone */
.np.hrf .hf-bar{top:calc(62 * var(--u));left:calc(16 * var(--u));right:calc(16 * var(--u));height:calc(44 * var(--u));grid-template-columns:calc(44 * var(--u)) 1fr calc(44 * var(--u))}
.np.hrf .hf-cb{width:calc(44 * var(--u));height:calc(44 * var(--u))}
.np.hrf .hf-cb svg.i{width:calc(21 * var(--u));height:calc(21 * var(--u))}
.np.hrf .hf-pg{gap:calc(10 * var(--u));height:calc(40 * var(--u));padding:0 calc(16 * var(--u));border-radius:calc(20 * var(--u));font-size:calc(16 * var(--u))}
.np.hrf .hf-pg i{width:calc(110 * var(--u));height:calc(8 * var(--u));border-radius:calc(4 * var(--u))}
.np.hrf .hf-trace{top:calc(122 * var(--u));left:calc(16 * var(--u));right:calc(16 * var(--u));height:calc(380 * var(--u));border-radius:calc(36 * var(--u))}
.np.hrf .hf-nm{top:calc(528 * var(--u));padding:0 calc(24 * var(--u))}
.np.hrf .hf-nm b{font-size:calc(64 * var(--u));line-height:calc(70 * var(--u))}
.np.hrf .hf-nm span{margin-top:calc(4 * var(--u));font-size:calc(16 * var(--u));line-height:1.35}
.np.hrf .hf-btns{left:calc(16 * var(--u));right:calc(16 * var(--u));bottom:calc(48 * var(--u));gap:calc(12 * var(--u))}
.np.hrf .hf-btns span{flex:1;gap:calc(8 * var(--u));height:calc(56 * var(--u));border-radius:calc(28 * var(--u));font-size:calc(18 * var(--u))}
.np.hrf .hf-btns .pri{flex:1.4}
.np.hrf .hf-btns svg.i{width:calc(20 * var(--u));height:calc(20 * var(--u));stroke-width:2.4}

@media (max-width:1100px){
  .hero{column-gap:16px}
  .hero .say{grid-column:1/7}
  .hero .stage{grid-column:7/13;padding:48px 28px}
  .steps{grid-template-columns:minmax(0,1fr);row-gap:36px;max-width:640px}
  .steps li{padding:10px 0 0 72px;min-height:56px}
  .steps li::before{left:27px;right:auto;top:64px;bottom:-28px;width:2px;height:auto}
  .steps h3{font-size:22px}
  .steps p{margin-top:8px;font-size:17px}
  .promise{padding:56px 48px}
  .never{grid-column:1/13}
  .tipcard{grid-column:1/13;margin-top:48px;max-width:520px}
  .head .h2{grid-column:1/13}
  .head .side{grid-column:1/13;margin-top:24px}
  .more{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lede-text{grid-column:1/13}
  .lede .cta{grid-column:1/13;margin-top:32px}
  .wall{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promises ul{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
}
@media (max-width:760px){
  :root{--pad:20px;--part:96px}
  body{font-size:17px}
  .top{height:72px}
  .top nav{gap:24px}
  .mark{font-size:20px}.mark .ar{font-size:19px}
  .hero{display:block;padding-top:16px}
  .appicon{width:72px;height:72px}
  .hero h1{margin-top:24px;font-size:56px;line-height:.98}
  .job{margin-top:18px;font-size:20px}
  .hero .cta{margin-top:28px}
  .cta{flex-direction:column;align-items:flex-start}
  .go{width:100%}
  .hero .stage{margin-top:40px;padding:40px 24px;border-radius:28px}
  .hero .stage.drawn{padding-top:64px}
  .stage .device,.stage .np{width:min(100%,264px)}
  .stage.ipad .device,.stage .duo{width:100%}
  .h2{font-size:40px;letter-spacing:-.03em}
  .h2-small{font-size:32px}
  .steps{margin-top:36px;row-gap:32px}
  .steps li{padding:10px 0 0 64px;min-height:48px}
  .steps li::before{left:23px;top:56px;bottom:-24px}
  .num{width:48px;height:48px;font-size:20px}
  .steps h3{font-size:21px}
  .promise{display:block;padding:40px 20px 20px;border-radius:28px}
  .never ul{margin-top:28px;row-gap:18px}
  .never li{font-size:20px;padding-left:36px}
  .never li::before{width:20px;height:20px}
  .tipcard{margin-top:36px;padding:28px 24px;border-radius:22px}
  .tipcard h3{font-size:22px}
  .head{display:block}
  .side p{font-size:19px}
  .side .go{margin-top:24px}
  .more{margin-top:32px;gap:16px}
  .tile{padding:20px 16px;border-radius:22px}
  .tile img{width:48px;height:48px}
  .tile h3{margin-top:16px;font-size:17px}
  .tile p{font-size:14px}
  .tile p{margin-top:4px}
  .tile .where{margin-top:10px;font-size:13px;overflow-wrap:anywhere}
  .foot-in{flex-direction:column;align-items:flex-start;padding:28px 0 40px}
  .foot .meta{gap:0 24px}
  .hero-studio{padding-top:40px}
  .hero-studio h1{font-size:44px;line-height:1.02;letter-spacing:-.04em}
  .lede{display:block;margin-top:20px}
  .lede-text{font-size:19px}
  .lede .cta{margin-top:28px}
  .wall-part{padding-top:56px}
  .wall{gap:40px 16px}
  .card .label{margin-top:14px;font-size:16px;gap:8px}
  .card .label img{width:26px;height:26px}
  .card .line{font-size:14px}
  .card .where{font-size:13px;overflow-wrap:anywhere}
  .stage.mini .sample{left:10px;top:10px;height:24px;font-size:12px;padding:0 10px}
  .promises ul{grid-template-columns:minmax(0,1fr);row-gap:28px}
  .promises h3{font-size:21px}
}
@media (prefers-reduced-motion:reduce){
  .hero .stage .device,.hero .stage .np{animation:none}
  .go,.tile,.stage.mini{transition:none}
  a.tile:hover,a.card:hover .stage.mini{transform:none}
}