/* ==========================================================================
   Your Name — portfolio.
   White ground, near-black type, one red accent, a 12-column grid.
   Two bodies of work: UX/UI case studies, then illustration & graphic design.

   COLOUR (ratios computed, not estimated)
     ink  #1a1a1a on white ....... 17.40:1
     grey #6f6f6f on white ......... 5.02:1
     grey #6f6f6f on the #fafafa graphics ground ... 4.81:1
       (#767676 was 4.35:1 on that tint -- it failed, so the grey darkened.
        Lightening the tint could not fix it: even #fdfdfd only reached 4.47.)
     red  #e61428 on white ......... 4.67:1
     white on red .................. 4.67:1
     footer: white on ink 17.40:1, #b3b3b3 on ink 8.30:1
     red on ink is 3.73:1 -> never text on ink.

   MOTION
     Code-driven only: no animation library. Scroll-driven animations and
     View Transitions are progressive enhancement -- where unsupported
     (Firefox, older Safari) a JS fallback or a static layout takes over.
     Everything is disabled under prefers-reduced-motion.
   ========================================================================== */

:root {
  --white:#fff; --ink:#1a1a1a; --grey:#6f6f6f; --line:#e3e4e5; --red:#e61428; --soft:#b3b3b3;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;

  --t-hero:clamp(1.7rem,.85rem + 3.2vw,3.6rem);
  --t-h2:clamp(1.35rem,1rem + 1.5vw,2.25rem);
  --t-h3:clamp(1.1rem,.98rem + .55vw,1.4rem);
  --t-body:1rem;
  --t-small:.8125rem;

  /* proximity: within a unit < between units < between groups < sections */
  --s1:.375rem; --s2:.75rem; --s3:1.25rem; --s4:3rem; --s5:clamp(4rem,9vw,8rem);

  --gutter:clamp(1rem,2.4vw,2rem);
  --bar-h:4rem;
  --ease:cubic-bezier(.22,.75,.2,1);
  /* a settle curve with a touch of overshoot, for things that "arrive" */
  --spring:linear(0,.24 7%,.63 14%,.91 21%,1.04 27%,1.06 35%,1.02 47%,.999 63%,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--bar-h) + 1rem)}
body{
  margin:0;background:var(--white);color:var(--ink);
  font:400 var(--t-body)/1.5 var(--sans);-webkit-font-smoothing:antialiased;
}
body:has(dialog[open]){overflow:hidden}

h1,h2,h3,p,ul,ol,dl,dd,figure,figcaption{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
a{color:inherit}
.num{font-variant-numeric:tabular-nums lining-nums}

.wrap{width:100%;max-width:110rem;margin-inline:auto;padding-inline:var(--gutter)}

/* ---------- Focus ---------- */
:focus{outline:none}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--white)}
.contact :focus-visible{outline-color:var(--white);box-shadow:0 0 0 5px var(--ink)}

.skip{position:fixed;left:var(--gutter);top:-5rem;z-index:300;background:var(--ink);color:var(--white);padding:.85rem 1.1rem;text-decoration:none;font-weight:500}
.skip:focus{top:.75rem}

/* ---------- Bar ---------- */
.bar{position:sticky;top:0;z-index:100;background:var(--white);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.bar__in{display:flex;align-items:center;justify-content:space-between;min-height:var(--bar-h);gap:var(--s3)}
.brand{font-weight:700;font-size:1.125rem;letter-spacing:-.02em;text-decoration:none;display:inline-flex;align-items:center;min-height:2.75rem;white-space:nowrap}
.bar nav ul{display:flex;gap:clamp(.85rem,2.6vw,2rem)}
.bar nav a{display:inline-flex;align-items:center;min-height:2.75rem;text-decoration:none;font-size:.9375rem;color:var(--grey);transition:color .2s var(--ease)}
.bar nav a:hover,.bar nav a[aria-current="true"]{color:var(--ink)}
.bar nav a[aria-current="true"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5em}
/* Phones: at 375px name + links measured 383px against 343px of room, and the overflow made
   mobile browsers lay the whole page out at 399px and shrink it. Tighter type and gaps fit one
   row (about 335px); on anything narrower the links wrap under the name instead of overflowing. */
@media (max-width:30rem){
  .bar__in{flex-wrap:wrap;column-gap:var(--s2);row-gap:0}
  .brand{font-size:1rem}
  .bar nav ul{gap:.6rem}
  .bar nav a{font-size:.875rem}
}
/* 360px Android phones were 9px short of one row */
@media (max-width:23rem){
  .bar__in{column-gap:.5rem}
  .brand{font-size:.9375rem}
  .bar nav ul{gap:.5rem}
  .cs-idx{display:none}   /* the reader's "01 / 02" (aria-hidden) pushed its bar 7px past a 320px screen */
}
/* The live-prototype tooltip, centred on its icon, reached ~9px past a 320px screen. Even
   invisible (opacity 0) it counts as overflow, so phones widened the whole page to fit it.
   On phones the last tooltip hangs from the icon's right edge instead. */
@media (max-width:30rem){
  .case__icon:last-child::after{left:auto;right:0;transform:translate(0,.25rem)}
  .case__icon:last-child:hover::after,.case__icon:last-child:focus-visible::after{transform:translate(0,0)}
}

/* ---------- Intro ---------- */
.intro{padding-block:var(--s5) var(--s4)}
.intro__h{max-width:34ch;font-size:var(--t-hero);font-weight:500;line-height:1.08;letter-spacing:-.03em;text-wrap:pretty}   /* no one-word last line */
.intro__sub{margin-top:var(--s3);max-width:44ch;color:var(--grey)}
/* line-masked wipe: one per line, never per word */
.ln{display:block;overflow:hidden;padding-bottom:.04em;margin-bottom:-.04em}
.ln>span{display:block}

/* ---------- Section scaffolding ---------- */
.sec{padding-block:var(--s5)}
.sec--gfx{background:#fafafa;border-block:1px solid var(--line)}
.sec__head{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s2) var(--s3);padding-bottom:var(--s5);padding-top:var(--s3)}
/* The section rule is a pseudo-element so it can draw in: motion.js animates
   --rule from 0 to 1. Unset (no JS, reduced motion) it falls back to fully drawn. */
.sec__head::before{content:"";position:absolute;inset:0 0 auto 0;height:1px;background:var(--ink);transform:scaleX(var(--rule,1));transform-origin:left center}
.sec__label{grid-column:1/span 3;font-size:var(--t-small);font-weight:700}
.sec__note{grid-column:4/span 6;font-size:var(--t-small);color:var(--grey);max-width:44ch}
@media (max-width:63.99rem){.sec__label,.sec__note{grid-column:1/-1}.sec__head{padding-bottom:var(--s4)}}

/* ---------- Shared image frame (parallax lives here) ---------- */
.frame{display:block;overflow:hidden;background:var(--line);position:relative}
.frame--wide{aspect-ratio:3/2}
.frame--tall{aspect-ratio:4/5}
.frame img{width:100%;height:100%;object-fit:cover}
/* Portrait phone screenshots. The frames and the reader were drawn for
   landscape images; cover-cropped to full width, a phone screen became a
   blurry, enormous slab. Shown whole instead, on the Cenomi ground from the
   Figma file. The padding leaves room for the 1.1 overscan and the parallax
   drift in motion.js. */
.frame--phone{background:#aa2d5b}
.frame--phone img{object-fit:contain;padding-block:10%}

/* ---------- 01 Case studies ---------- */
.cases{display:grid;gap:var(--s5)}
.case article{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3);align-items:start}
.case__media{grid-column:1/span 7;display:block;text-decoration:none}
/* alternate sides without reordering the DOM */
.case:nth-child(even) .case__media{grid-column:6/span 7}
.case:nth-child(even) .case__text{grid-column:1/span 4;grid-row:1}
.case__text{grid-column:9/span 4;display:grid;gap:var(--s2);align-content:start}
.case__no{font-size:var(--t-small);color:var(--red);font-variant-numeric:tabular-nums;font-weight:700}
.case__title{font-size:var(--t-h2);font-weight:500;letter-spacing:-.025em;line-height:1.1}
.case__title a{text-decoration:none}
.case__sum{color:var(--grey);max-width:34ch}
.case__facts{display:grid;gap:.15rem;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.case__facts>div{display:grid;grid-template-columns:7rem 1fr;gap:var(--s2);font-size:var(--t-small);padding-block:.2rem}
.case__facts dt{color:var(--grey)}
.case__go{margin-top:var(--s2);font-size:.9375rem;font-weight:500}
.arw{display:inline-block}

/* the whole card is one target */
.case__title a::after{content:"";position:absolute;inset:0}
.case__title a:focus-visible{outline:none;box-shadow:none}
.case__title a:focus-visible::after{outline:2px solid var(--ink);outline-offset:4px}
.case:hover .case__title,.case:focus-within .case__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}

@media (max-width:63.99rem){
  .case article{grid-template-columns:minmax(0,1fr);gap:var(--s3)}
  .case__media,.case__text,
  .case:nth-child(even) .case__media,.case:nth-child(even) .case__text{grid-column:1/-1;grid-row:auto}
}

/* ---------- 02 Graphics ---------- */
.gfxgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4) var(--s3)}
.gfx{grid-column:span 4;position:relative}
.gfx[data-span="5"]{grid-column:span 5}
.gfx[data-span="6"]{grid-column:span 6}
.gfx[data-span="7"]{grid-column:span 7}
.gfx__btn{display:grid;gap:var(--s2);width:100%;text-align:left}
.gfx__btn::after{content:"";position:absolute;inset:0}
.gfx__btn:focus-visible{outline:none;box-shadow:none}
.gfx__btn:focus-visible::after{outline:2px solid var(--ink);outline-offset:4px}
.gfx__cap{display:grid;gap:.1rem}
.gfx__title{font-weight:700;font-size:1.0625rem;letter-spacing:-.01em}
.gfx__desc{color:var(--ink)}
.gfx__tag{font-size:var(--t-small);color:var(--grey)}
.gfx:hover .gfx__title,.gfx:focus-within .gfx__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
@media (max-width:63.99rem){.gfxgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.gfx,.gfx[data-span]{grid-column:span 1}.gfxgrid .frame--wide{aspect-ratio:4/5}}   /* graphics only: on the case cards it made tall, mostly empty frames on tablets */
@media (max-width:39.99rem){.gfxgrid{grid-template-columns:minmax(0,1fr)}.gfx,.gfx[data-span]{grid-column:1}.frame--wide,.frame--tall{aspect-ratio:3/2}}

/* ---------- About ---------- */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4) var(--s3)}
.about .sec__label{grid-column:1/span 3}
.about__lead{grid-column:4/span 8;font-size:var(--t-h2);font-weight:500;line-height:1.15;letter-spacing:-.025em;text-wrap:pretty}
.about__lists{grid-column:4/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s3)}
.about__lists h3,.contact__cols h3{font-size:var(--t-small);font-weight:400;color:var(--grey);margin-bottom:var(--s2)}
.about__lists li{padding-block:.3rem;border-top:1px solid var(--line)}
.about__lists li:first-child{border-top-color:var(--ink)}
@media (max-width:63.99rem){.about .sec__label,.about__lead,.about__lists{grid-column:1/-1}.about__lists{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:39.99rem){.about__lists{grid-template-columns:minmax(0,1fr)}}

/* ---------- Contact ---------- */
.contact{background:var(--ink);color:var(--white);padding-block:var(--s5) var(--s4)}
.contact .wrap{display:grid;gap:var(--s4)}
.contact .sec__label{grid-column:auto;color:var(--soft);font-weight:400}  /* the 1/span 3 from .sec__label would force implicit columns here */
.contact__lead{font-size:var(--t-h2);font-weight:500;letter-spacing:-.025em;margin-bottom:calc(var(--s3) * -1)}
.contact__mail{justify-self:start;font-size:var(--t-hero);font-weight:500;letter-spacing:-.03em;line-height:1.1;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em;text-decoration-color:var(--red);overflow-wrap:anywhere}
.contact__mail:hover{text-decoration-thickness:4px}
.contact__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4) var(--s3);padding-top:var(--s3);border-top:1px solid rgba(255,255,255,.28)}
.contact__cols h3{color:var(--soft)}
.contact__cols p,.contact__cols li{max-width:26em}
.contact__cols li a{display:inline-flex;min-height:2rem;align-items:center}
.contact a{text-decoration-thickness:1px;text-underline-offset:.2em}
.contact__end{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2);font-size:var(--t-small);color:var(--soft)}
.contact__end a{color:var(--white);display:inline-flex;min-height:24px;align-items:center}
@media (max-width:47.99rem){.contact__cols{grid-template-columns:minmax(0,1fr)}}

/* ---------- Case-study reader ---------- */
.cs,.lb{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--white);color:var(--ink);overflow:auto}
.cs::backdrop,.lb::backdrop{background:var(--white)}
.cs-progress{position:sticky;top:0;z-index:6;height:2px;background:var(--line)}
.cs-progress span{display:block;height:100%;background:var(--red);transform-origin:left;transform:scaleX(0)}
.cs-bar,.lb-bar{position:sticky;top:2px;z-index:5;background:var(--white);border-bottom:1px solid var(--line)}
.lb-bar{top:0}
.cs-bar__in,.lb-bar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:var(--bar-h)}
.cs-btn{display:inline-flex;align-items:center;gap:.5em;min-height:2.75rem;font-size:.9375rem;font-weight:500;text-align:left}
.cs-btn:hover{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.cs-next-t{color:var(--grey)}
.cs-next-t::before{content:": "}
.cs-idx{font-size:var(--t-small);color:var(--grey);font-variant-numeric:tabular-nums}

.cs-main{padding-block:var(--s4) var(--s5);display:grid;gap:var(--s4)}
.cs-title{font-size:var(--t-hero);font-weight:500;letter-spacing:-.03em;line-height:1.05;max-width:20ch}
.cs-title:focus-visible{outline:none;box-shadow:none}
.cs-hero{overflow:hidden;background:var(--line);aspect-ratio:3/2}
.cs-hero img{width:100%;height:100%;object-fit:cover}
.cs-hero:has(img.is-phone){background:#aa2d5b}
.cs-hero img.is-phone{object-fit:contain;padding-block:4%}
/* the Greenpertise island (1047px, transparent) sits whole on white: cropped to fill a 3:2 hero it was
   upscaled past its pixels and looked soft */
.cs-hero:has(img.is-island){background:var(--white)}
.cs-hero img.is-island{object-fit:contain;padding-block:5%}

/* Anything sticky inside the reader clears the progress bar + the top bar. */
:root{--cs-stick:calc(var(--bar-h) + 2px + var(--s3))}

.cs-content{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4) var(--s3)}

/* The opening statement is set wide and indented, so it reads as a standfirst
   rather than as the first paragraph of the body. */
/* Set wide with a deep first-line indent, so it reads as a standfirst
   rather than as a paragraph with a typo. */
/* Opening row, as on Pentagram's and Designit's project pages: the standfirst on the
   left, the project facts in a column on the right, one compact block. (Stacked, the
   facts sat alone in a narrow column under a half-empty row.) */
.cs-lede{grid-column:1/span 8;font-size:var(--t-h2);font-weight:500;line-height:1.15;letter-spacing:-.025em;text-wrap:pretty;max-width:none;text-indent:24%}

.cs-meta{grid-column:10/span 3;display:grid;gap:var(--s2);align-content:start}
.cs-meta>div{display:grid;gap:.1rem;padding-top:.5rem;border-top:1px solid var(--line)}
.cs-meta dt{font-size:var(--t-small);color:var(--grey)}

/* Each section is a full-width band on the same 12 columns as its parent, so
   the heading can hold the left margin while the body and figure scroll past.
   This is the pattern the reference uses for its case studies. */
.cs-block{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s3);align-items:start}
.cs-block h3{
  grid-column:1/span 3;
  position:sticky;top:var(--cs-stick);align-self:start;
  margin:0;font-size:var(--t-small);font-weight:700;color:var(--red);
  padding-top:var(--s2);border-top:1px solid var(--ink);
}
.cs-body{grid-column:5/span 7;display:grid;gap:var(--s3);font-size:var(--t-h3);line-height:1.45;letter-spacing:-.01em}
.cs-body p{max-width:46ch;text-wrap:pretty}
.ph{color:var(--red);font-weight:500}

/* Figures carry a rhythm rather than four identical slabs: full bleed, then a
   small one inside the text column, then one offset to the right. */
.cs-fig{display:grid;gap:var(--s2);margin-top:var(--s3)}
.cs-fig img{width:100%;height:auto;background:var(--line)}
.cs-fig figcaption{font-size:var(--t-small);color:var(--grey);max-width:44ch}
.cs-fig--full{grid-column:1/-1;margin-top:0}
.cs-fig--wide{grid-column:5/-1}
.cs-fig--inset{grid-column:5/span 5}
.cs-fig--phone{justify-items:center}
.cs-fig--phone img{width:min(100%,375px)}

.cs-block--last .cs-body{font-size:var(--t-h2);font-weight:500;line-height:1.2;letter-spacing:-.02em}

@media (max-width:63.99rem){
  .cs-content{gap:var(--s4) var(--s3)}
  .cs-lede{grid-column:1/-1;max-width:none;text-indent:0}
  .cs-meta{grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr))}
  .cs-block{grid-template-columns:minmax(0,1fr);gap:var(--s2)}
  .cs-block h3{grid-column:1/-1;position:static}
  .cs-body,.cs-fig--full,.cs-fig--wide,.cs-fig--inset{grid-column:1/-1}
}

/* ---------- Lightbox (graphics) ---------- */
.lb-main{padding-block:var(--s4) var(--s5);display:grid;gap:var(--s3);max-width:76rem}
.lb-title{font-size:var(--t-h2);font-weight:500;letter-spacing:-.025em}
.lb-title:focus-visible{outline:none;box-shadow:none}
.lb-meta{font-size:var(--t-small);color:var(--grey)}
.lb-note{max-width:52ch;font-size:var(--t-h3);line-height:1.45;color:var(--ink)}
.lb-imgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin-top:var(--s2)}
.lb-imgs img{width:100%;height:auto;background:var(--line)}
@media (max-width:47.99rem){.lb-imgs{grid-template-columns:minmax(0,1fr)}}


/* ---------- Custom cursor ----------
   A small ring that follows the pointer and morphs circle to rectangle.

   Promoted into the top layer via popover="manual" (see motion.js) so it can
   paint above an open <dialog>, which is ALSO top-layer and otherwise beats
   any z-index. That borrows the UA [popover] stylesheet -- a centred box with
   its own border/background/padding/inset -- so every property it sets is
   overridden below, even ones this rule would not otherwise need, or a
   supporting browser draws a visible box around the cursor. */
.cursor,.cursor__dot{
  margin:0;inset:auto;padding:0;overflow:visible;
  background-color:transparent;color:inherit;
}
.cursor{
  position:fixed;top:0;left:0;z-index:600;
  width:var(--cur-w,26px);height:var(--cur-h,26px);
  border:1px solid rgba(26,26,26,0.4);
  border-radius:var(--cur-r,50%);
  pointer-events:none;opacity:0;
  will-change:transform,width,height;
}
.cursor__dot{
  position:fixed;top:0;left:0;z-index:601;
  width:var(--dot-w,6px);height:var(--dot-h,6px);
  border:0;
  border-radius:var(--dot-r,50%);
  background:var(--dot-bg,#e61428);
  pointer-events:none;opacity:0;
  will-change:transform,width,height;
}
.cursor.is-dark{
  border-color:rgba(242,242,242,0.4);
}

@media (hover:hover) and (pointer:fine){
  /* !important, and pseudo-elements listed explicitly: a bare `*` loses to
     `button{cursor:pointer}` in some hit-test paths, and never reaches
     ::backdrop at all, which is what let the native arrow flash through while
     content scrolled fast under a stationary pointer. */
  html.has-cursor,html.has-cursor body,html.has-cursor *,
  html.has-cursor *::before,html.has-cursor *::after{cursor:none!important}
  /* Its own rule: an unrecognised ::backdrop would invalidate the whole
     selector list it sat in, taking cursor:none down with it. */
  html.has-cursor *::backdrop{cursor:none!important}
  /* Anything whose cursor carries meaning keeps it. */
  html.has-cursor input,html.has-cursor textarea,html.has-cursor [contenteditable]{cursor:auto!important}
}
@media (hover:none),(pointer:coarse){.cursor{display:none}}

/* ---------- First-load greeting ----------
   Shown once per session by the inline guard in the markup, which also removes
   it on a hard timer, so a script failure can never leave a panel over the work.
   It is `hidden` in the HTML by default: a visitor with no JS never sees it. */
.preload{
  position:fixed;inset:0;z-index:500;background:var(--ink);color:var(--white);
  display:grid;place-items:center;padding:var(--gutter);
  will-change:transform;
}
.preload__in{
  display:grid;grid-template-columns:auto minmax(0,auto);
  align-items:center;gap:clamp(1.25rem,4vw,4.5rem);
  max-width:64rem;
}
.preload__fig{
  width:clamp(150px,23vw,330px);aspect-ratio:3/4;
  overflow:hidden;background:#232323;margin:0;
}
.preload__fig img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.preload__hi{display:grid;gap:.5rem}
.preload__l{
  display:block;font-size:clamp(1.6rem,1rem + 3.4vw,4.1rem);font-weight:500;
  line-height:1.08;letter-spacing:-.03em;text-wrap:balance;
}
.preload__l em{font-style:normal;color:var(--red)}
.preload__l--sub{
  font-size:clamp(1rem,.9rem + .7vw,1.5rem);font-weight:400;
  letter-spacing:-.01em;color:var(--soft);
}
.preload__bar{
  position:absolute;left:var(--gutter);bottom:var(--gutter);
  display:block;width:0;height:2px;background:var(--red);
  animation:pbar 1.6s var(--ease) forwards;
}
@keyframes pbar{from{width:0}to{width:min(34vw,20rem)}}
/* The page underneath does not scroll while the greeting is up. */
html.is-loading,html.is-loading body{overflow:hidden}

@media (max-width:37.49rem){
  .preload__in{grid-template-columns:minmax(0,1fr);justify-items:start;gap:1.25rem}
  .preload__fig{width:clamp(108px,30vw,150px)}
}

/* ---------- Arming ----------
   Set by the inline guard in the markup, cleared by motion.js the moment every
   animated element is in its start state (and by a hard timer regardless). */
html.is-arming main{opacity:0}

/* ---------- SplitText units ----------
   The reveal is an opacity fade with a small rise, so there is no mask and
   nothing is clipped. These rules only hint the compositor — no resting
   element is hidden here, which keeps the safety contract intact. */
.ln{display:block;will-change:transform,opacity}
.wd,.ch{will-change:transform,opacity}
/* Words flow inline; nothing here may alter the line box or wrapping. */
.wd{display:inline-block}

/* ---------- Lenis ---------- */
html.has-lenis{scroll-behavior:auto}
html.has-lenis body{overscroll-behavior:none}

/* ==========================================================================
   MOTION

   Fail-safe by construction: the stylesheet never hides content. Nothing here
   sets opacity:0 or a clip on a resting element. JS applies the "from" state
   only at the moment it is able to animate it back, so if JS fails, if the
   observer never fires, or if the browser lacks anything used here, every
   card, image and heading is simply visible.

   (The previous build did the opposite -- CSS hid each card and a
   scroll-driven timeline revealed it. When that timeline failed to advance
   the content stayed invisible, which is how this was found.)
   ========================================================================== */
@media (prefers-reduced-motion:no-preference){

  /* Hover */
  /* Overscan: the image is slightly larger than its frame so the parallax
     translate can move it without revealing an edge. */
  .frame img{scale:1.1}
  @media (hover:hover){
    .frame img{transition:scale .75s var(--ease)}
    .case:hover .frame img,.gfx:hover .frame img{scale:1.16}
    .arw{transition:translate .45s var(--spring)}
    .case:hover .arw,.case:focus-within .arw{translate:.4rem 0}
    .cs-btn:hover .arw{translate:.3rem 0}
    .cs-btn:hover .arw--back{translate:-.3rem 0}
  }

  /* The reader arrives with a settle */
  .cs[open],.lb[open]{animation:arrive .5s var(--spring)}
  @keyframes arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

  /* Shared element: card image becomes the hero image */
  ::view-transition-group(hero){animation-duration:.5s;animation-timing-function:var(--ease)}
  ::view-transition-old(hero),::view-transition-new(hero){height:100%;object-fit:cover}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.3s}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .cs-progress{display:none}
}

@media (forced-colors:active){
  .frame,.cs-hero{border:1px solid CanvasText}
  .cs-progress span{background:Highlight}
}
@media print{.bar,.skip,.cs,.lb{display:none}.sec{padding-block:2rem}}

/* ==========================================================================
   Cenomi Rewards app prototype (#app-prototype, app-prototype.js)
   Everything inside .ap-device is laid out in the phone's own pixels at a
   fixed 390 x 844 and scaled as one piece, so text is never resampled.
   ========================================================================== */
#app-prototype{--ap-purple:#DB2E6D;--ap-ink:#20113E;--ap-muted:#63666F;--ap-line:#E3E4E8;--ap-bg:#F5F5F7;--ap-dgrey:#46484F;
  justify-items:center;gap:20px;padding:40px 16px 48px;background:#f4f1f5}
#app-prototype h3,#app-prototype h4,#app-prototype h5{margin:0;font-size:inherit}
#app-prototype .ap-caption{font-size:var(--t-small);color:var(--ink);max-width:none;text-align:center}
#app-prototype .ap-sprite{position:absolute;width:0;height:0;overflow:hidden}
#app-prototype .ap-stage{position:relative;margin:0 auto}
#app-prototype .ap-device{position:absolute;left:0;top:0;width:414px;height:868px;padding:12px;border-radius:58px;
  background:#111;box-shadow:0 40px 80px -40px rgba(0,0,0,.5);transform-origin:0 0}
#app-prototype .ap-screen{position:relative;width:390px;height:844px;border-radius:46px;overflow:hidden;
  background:var(--ap-bg);color:var(--ap-ink);font:400 15px/1.4 "Titillium Web",-apple-system,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-align:left}
#app-prototype img{max-width:none;width:auto;height:auto;background:none}
#app-prototype svg{width:24px;height:24px;flex:none;fill:none}
#app-prototype button{font:inherit;color:inherit}
#app-prototype .ap-coin{width:22px;height:22px;color:var(--ap-purple)}

/* status bar + home indicator, above every view */
#app-prototype .ap-status{position:absolute;inset:0 0 auto;z-index:10;height:47px;display:flex;align-items:center;
  justify-content:space-between;padding:4px 30px 0 44px;pointer-events:none;transition:color .25s}
#app-prototype .ap-screen.is-light .ap-status{color:#fff}
#app-prototype .ap-time{font-weight:600;font-size:16px}
#app-prototype .ap-sys{display:flex;align-items:center;gap:6px}
#app-prototype .ap-signal{display:flex;align-items:flex-end;gap:1.5px;height:11px}
#app-prototype .ap-signal b{width:3px;background:currentColor;border-radius:1px}
#app-prototype .ap-signal b:nth-child(1){height:4px}#app-prototype .ap-signal b:nth-child(2){height:6px}
#app-prototype .ap-signal b:nth-child(3){height:8.5px}#app-prototype .ap-signal b:nth-child(4){height:11px}
#app-prototype .ap-wifi{width:16px;height:12px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 12l2.6-3.1a4 4 0 0 0-5.2 0zM3.7 6.9a6.5 6.5 0 0 1 8.6 0l1.6-1.9a9 9 0 0 0-11.8 0zM.5 3.1a11.5 11.5 0 0 1 15 0L16 2.5A12.3 12.3 0 0 0 0 2.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M8 12l2.6-3.1a4 4 0 0 0-5.2 0zM3.7 6.9a6.5 6.5 0 0 1 8.6 0l1.6-1.9a9 9 0 0 0-11.8 0zM.5 3.1a11.5 11.5 0 0 1 15 0L16 2.5A12.3 12.3 0 0 0 0 2.5z'/%3E%3C/svg%3E") center/contain no-repeat}
#app-prototype .ap-batt{position:relative;width:25px;height:12px;border:1.2px solid currentColor;border-radius:3.5px;opacity:.95}
#app-prototype .ap-batt::before{content:"";position:absolute;inset:1.5px 4px 1.5px 1.5px;background:currentColor;border-radius:1.5px}
#app-prototype .ap-batt::after{content:"";position:absolute;right:-4px;top:3px;width:2px;height:4px;background:currentColor;border-radius:0 1px 1px 0}
#app-prototype .ap-homebar{position:absolute;left:50%;bottom:8px;z-index:10;width:134px;height:5px;margin-left:-67px;border-radius:3px;background:#111;pointer-events:none}

/* views */
#app-prototype .ap-view{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--ap-bg)}
#app-prototype .ap-view[hidden]{display:none}
#app-prototype .ap-scroll{flex:1;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none}
#app-prototype .ap-scroll::-webkit-scrollbar{display:none}
#app-prototype .ap-view[data-view="home"] .ap-scroll{padding-top:47px}
#app-prototype .ap-iconbtn{display:grid;place-items:center;width:44px;height:44px;border-radius:50%}

/* home: brand bar + profile card */
#app-prototype .ap-brand{position:relative;display:grid;place-items:center;height:52px}
#app-prototype .ap-logo{position:relative;font-weight:600;font-size:30px;letter-spacing:-.5px;line-height:1}
#app-prototype .ap-logo i{position:absolute;left:-1px;bottom:1px;width:8px;height:8px;border-radius:50%;background:var(--ap-purple)}
#app-prototype .ap-inbox{position:absolute;right:10px;top:4px}
#app-prototype .ap-profile{margin:8px 16px 0;padding-top:20px;border-radius:12px;background:#fff;text-align:center;overflow:hidden;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06)}
#app-prototype .ap-avatar{position:relative;width:90px;height:90px;margin:0 auto}
#app-prototype .ap-avatar img{width:90px;height:90px;border-radius:50%;object-fit:cover}
#app-prototype .ap-qr{position:absolute;right:-8px;bottom:-4px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.18)}
#app-prototype .ap-qr svg{width:20px;height:20px}
#app-prototype .ap-name{margin:14px 0 16px;font-size:24px;font-weight:600;line-height:1.2}
#app-prototype .ap-member{display:grid;grid-template-columns:repeat(3,1fr);margin:0 16px}
#app-prototype .ap-member div+div{border-left:1px solid var(--ap-line)}
#app-prototype .ap-member dt{font-size:13px;color:var(--ap-muted)}
#app-prototype .ap-member dd{margin:2px 0 0;font-size:15px;font-weight:600}
#app-prototype .ap-have{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:24px;color:var(--ap-muted)}
#app-prototype .ap-progress{display:block;height:8px;margin:10px 16px 0;border-radius:8px;background:#e6e6e6;overflow:hidden}
#app-prototype .ap-progress>span{display:block;width:55%;height:100%;border-radius:8px;background:var(--ap-purple)}
#app-prototype .ap-need{margin:10px 0 18px;color:var(--ap-muted)}
#app-prototype .ap-need b{color:var(--ap-ink);font-weight:600}
#app-prototype .ap-tabs{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ap-line)}
#app-prototype .ap-tabs button{height:46px;font-size:16px;color:var(--ap-purple);background:#fff;transition:background-color .2s,color .2s}
#app-prototype .ap-tabs button[aria-selected="true"],#app-prototype .ap-tabs button[aria-pressed="true"]{background:var(--ap-purple);color:#fff}

/* home: benefits row */
#app-prototype .ap-sechead{display:grid;grid-template-columns:1fr auto;align-items:end;padding:26px 16px 14px}
#app-prototype .ap-sechead h4{grid-column:1/-1;font-size:22px;font-weight:600}
#app-prototype .ap-sechead h4 span{font-size:16px;font-weight:400;color:var(--ap-muted)}
#app-prototype .ap-sechead p{color:var(--ap-muted)}
#app-prototype .ap-link{display:flex;align-items:center;gap:2px;color:var(--ap-purple);font-size:16px}
#app-prototype .ap-link svg{width:18px;height:18px}
#app-prototype .ap-row{display:flex;gap:16px;padding:0 16px 24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;scrollbar-width:none;cursor:grab}
#app-prototype .ap-row::-webkit-scrollbar{display:none}
#app-prototype .ap-row.is-dragging{scroll-snap-type:none;cursor:grabbing}
#app-prototype .ap-row.is-dragging .ap-card{pointer-events:none}

/* benefit card (row and list) */
#app-prototype .ap-card{display:flex;flex-direction:column;flex:none;width:293px;border-radius:12px;background:#fff;overflow:hidden;text-align:left;
  scroll-snap-align:start;box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06)}
#app-prototype .ap-card--list{width:100%;--k:1.04373}
/* Card photos come from the Figma card component with its tag and buttons baked in at fixed
   positions (343 or 293 wide, 160 tall). --k scales the overlays with the card so the HTML tag and
   buttons sit exactly on those, a pixel larger and opaque so nothing underneath shows. */
#app-prototype .ap-card{--k:1}
#app-prototype .ap-card__img{position:relative;display:block;height:calc(160px * var(--k));background:#ddd}
#app-prototype .ap-card__img img{width:100%;height:100%;object-fit:cover;-webkit-user-drag:none}
#app-prototype .ap-label{position:absolute;left:0;top:calc(27px * var(--k));display:flex;align-items:center;min-width:calc(70px * var(--k));height:calc(26px * var(--k));padding:0 14px 0 12px;border-radius:0 13px 13px 0;background:var(--ap-purple);color:#fff;font-size:13px;font-weight:600}
#app-prototype .ap-chip{position:absolute;right:calc(15px * var(--k));top:calc(23px * var(--k));display:grid;place-items:center;width:calc(34px * var(--k));height:calc(34px * var(--k));border-radius:50%;background:#262626;color:#fff}
#app-prototype .ap-chip--2{right:calc(63px * var(--k))}
#app-prototype .ap-chip svg{width:18px;height:18px}
#app-prototype .ap-card__body{display:flex;flex-direction:column;gap:4px;padding:12px 16px 16px}
#app-prototype .ap-card__brand{font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-card__title{font-size:18px;font-weight:600;line-height:1.3}
#app-prototype .ap-card__desc{font-size:14px;color:var(--ap-dgrey);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#app-prototype .ap-card__meta{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:13px;color:var(--ap-dgrey)}
#app-prototype .ap-card__meta svg{width:18px;height:18px;color:var(--ap-purple)}
#app-prototype .ap-card__meta--pts{margin-top:0;color:var(--ap-purple);font-weight:600}

/* home: earn panel */
#app-prototype #ap-panel-earn{padding:22px 16px 24px}
#app-prototype .ap-level{display:flex;justify-content:space-between;margin:6px 0 10px;font-size:16px;font-weight:600}
#app-prototype .ap-level+.ap-task,#app-prototype .ap-task+.ap-task{margin-top:12px}
#app-prototype .ap-task+.ap-level{margin-top:24px}
#app-prototype .ap-task{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06)}
#app-prototype .ap-task__row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:16px}
#app-prototype .ap-task__title{font-size:16px}
#app-prototype .ap-task__bar{display:flex;align-items:center;gap:10px;font-size:14px}
#app-prototype .ap-task__bar .ap-progress{flex:1;margin:0}
#app-prototype .ap-tag{align-self:flex-start;padding:3px 8px;border-radius:4px;font-size:12px;font-weight:600}
#app-prototype .ap-tag--task{color:#5a3bb8;background:rgba(90,59,184,.08)}
#app-prototype .ap-tag--prog{color:#3b80b8;background:rgba(59,128,184,.08)}
#app-prototype .ap-muted{font-size:12px;color:var(--ap-muted)}
#app-prototype .ap-pill{height:32px;padding:0 14px;border-radius:16px;background:var(--ap-purple);color:#fff;font-size:14px;white-space:nowrap}
#app-prototype .ap-pts{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
#app-prototype .ap-task--locked{color:#9a9a9a;border:1px solid var(--ap-line);box-shadow:none;gap:2px}
#app-prototype .ap-task--locked strong{color:var(--ap-muted)}

/* home: tab bar */
#app-prototype .ap-tabbar{flex:none;display:grid;grid-template-columns:repeat(3,1fr);height:86px;padding-bottom:24px;background:#fff;border-top:1px solid #eee}
#app-prototype .ap-tabbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:11px;font-weight:600;letter-spacing:.3px;color:var(--ap-dgrey)}
#app-prototype .ap-tabbar button.is-active{color:var(--ap-purple)}
#app-prototype .ap-tabbar button.is-active::before{content:"";position:absolute;top:-1px;left:22px;right:22px;height:2px;background:var(--ap-purple)}

/* benefits list */
#app-prototype .ap-nav{flex:none;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;height:99px;padding:47px 4px 0;background:#fff;box-shadow:inset 0 -1px 0 var(--ap-line)}
#app-prototype .ap-nav h4{text-align:center;font-size:17px;font-weight:600}
#app-prototype .ap-search{display:flex;gap:16px;padding:16px}
#app-prototype .ap-field{flex:1;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 14px;border:1px solid #ddd;border-radius:10px;background:#fff;color:var(--ap-muted);font-size:16px}
#app-prototype .ap-filter{display:flex;align-items:center;gap:6px;padding:0 16px;border:1px solid var(--ap-purple);border-radius:26px;color:var(--ap-purple);font-size:16px}
#app-prototype .ap-field--input{gap:8px;min-width:0;cursor:text;transition:border-color .15s}
#app-prototype .ap-field--input:focus-within{border-color:var(--ap-purple)}
#app-prototype .ap-field input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;color:var(--ap-ink);font:inherit;font-size:16px;-webkit-appearance:none;appearance:none}
#app-prototype .ap-screen input:focus-visible{outline:0;box-shadow:none}
#app-prototype .ap-cancel{flex-shrink:0;padding:0 2px;color:var(--ap-purple);font-size:16px}
#app-prototype .ap-suggest{padding:0 16px 32px}
#app-prototype .ap-shead{display:flex;align-items:center;justify-content:space-between;margin:8px 0 12px}
#app-prototype .ap-shead h5{font-size:18px;font-weight:600}
#app-prototype .ap-srows+.ap-shead{margin-top:24px}
#app-prototype .ap-srows{margin:0;padding:0 4px 0 16px;list-style:none;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
#app-prototype .ap-srows li{display:flex;align-items:center}
#app-prototype .ap-srows li+li{border-top:1px solid var(--ap-line)}
#app-prototype .ap-srow{flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:57px;font-size:17px;text-align:left}
#app-prototype .ap-srow>svg{flex:none;width:22px;height:22px;color:var(--ap-ink)}
#app-prototype .ap-srow>span{display:flex;flex-direction:column;min-width:0}
#app-prototype .ap-srow small{font-size:13px;color:var(--ap-muted)}
#app-prototype .ap-srow mark{background:none;color:var(--ap-purple)}
#app-prototype .ap-sside{flex:none;display:grid;place-items:center;width:44px;height:44px;color:var(--ap-muted)}
#app-prototype .ap-sside svg{width:18px;height:18px}
#app-prototype .ap-pchips{display:flex;flex-wrap:wrap;gap:10px}
#app-prototype .ap-pchip{height:40px;padding:0 16px;border:1px solid #d6d6d6;border-radius:20px;background:#fff;font-size:15px}
#app-prototype .ap-field input::placeholder{color:var(--ap-muted);opacity:1}
#app-prototype .ap-field input::-webkit-search-cancel-button{display:none}
#app-prototype .ap-clear{display:grid;place-items:center;width:22px;height:22px;margin-right:2px;border-radius:50%;background:#8a8a8a;color:#fff}
#app-prototype .ap-clear svg{width:14px;height:14px}
#app-prototype .ap-search .ap-filter{flex-shrink:0}
#app-prototype .ap-card__title mark{background:none;color:var(--ap-purple)}
#app-prototype .ap-empty{display:grid;justify-items:center;gap:8px;padding:56px 40px;text-align:center;color:var(--ap-muted)}
#app-prototype .ap-empty svg{width:40px;height:40px;margin-bottom:8px;color:#c9c9c9}
#app-prototype .ap-empty h5{color:var(--ap-ink);font-size:18px;font-weight:600}
#app-prototype .ap-empty p{margin:0;font-size:15px;line-height:1.45}
#app-prototype .ap-results{padding:0 16px 10px;font-size:15px;color:var(--ap-muted)}
#app-prototype .ap-list{display:grid;gap:16px;padding:0 16px 40px}

/* benefit detail */
#app-prototype .ap-hero{position:relative;height:300px;background:#ccc}
#app-prototype .ap-hero img{width:100%;height:100%;object-fit:cover}
#app-prototype .ap-hero::before{content:"";position:absolute;inset:0 0 auto;height:110px;background:linear-gradient(rgba(0,0,0,.45),transparent)}
#app-prototype .ap-dots{position:absolute;left:0;right:0;bottom:16px;display:flex;justify-content:center;gap:8px}
#app-prototype .ap-dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.6)}
#app-prototype .ap-dots i.on{background:#fff}
#app-prototype .ap-heroBtn{position:absolute;top:54px;z-index:5;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.2)}
#app-prototype .ap-heroBtn--back{left:16px}
#app-prototype .ap-heroBtn--fav{right:16px}
#app-prototype .ap-heroBtn[aria-pressed="true"] svg{color:var(--ap-purple);fill:var(--ap-purple)}
#app-prototype .ap-detail{padding:20px 16px 24px}
#app-prototype .ap-detail>p{margin-top:6px;font-size:15px;line-height:1.55;color:var(--ap-ink)}
#app-prototype .ap-dhead{display:flex;gap:14px;align-items:center;margin-bottom:12px}
#app-prototype .ap-blogo{display:grid;place-items:center;flex:none;width:58px;height:58px;border-radius:8px;background:#111;color:#fff;font-size:13px;font-weight:600;letter-spacing:.5px}
#app-prototype .ap-dhead h4{font-size:21px;font-weight:600;line-height:1.25}
#app-prototype .ap-dhead p{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-dhead p svg{width:18px;height:18px;color:var(--ap-purple)}
#app-prototype .ap-detail h5{margin-top:20px;font-size:16px;font-weight:600}
#app-prototype .ap-contact{margin-top:24px;padding:16px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06)}
#app-prototype .ap-contact h5{margin:0 0 12px;padding-bottom:12px;border-bottom:1px solid var(--ap-line);font-size:18px}
#app-prototype .ap-contact dt{font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--ap-muted)}
#app-prototype .ap-contact dd{margin:2px 0 12px;font-size:14px;font-weight:600}
#app-prototype .ap-contact dd:last-child{margin-bottom:0}
#app-prototype .ap-open{color:#2e9e5b;font-weight:600}
#app-prototype .ap-cta{flex:none;padding:12px 16px 34px;background:#fff;box-shadow:0 -2px 12px rgba(0,0,0,.07)}
#app-prototype .ap-cta__meta{display:flex;justify-content:center;gap:20px;font-size:14px;color:var(--ap-dgrey)}
#app-prototype .ap-cta__meta p{display:flex;align-items:center;gap:6px}
#app-prototype .ap-cta__meta svg{width:18px;height:18px;color:var(--ap-purple)}
#app-prototype .ap-redeem{width:100%;height:48px;margin-top:12px;border-radius:24px;background:var(--ap-purple);color:#fff;font-size:16px;font-weight:600;transition:background-color .2s}
#app-prototype .ap-redeem:disabled{background:#F08DB1;cursor:default}

/* Mall services flow (More > Malls > Mall > Shops > Shop / Event) */
#app-prototype .ap-pad{padding:16px}
#app-prototype .ap-nav h4{font-size:17px}
#app-prototype .ap-menu{display:flex;flex-direction:column;padding:0 16px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
#app-prototype .ap-menu button{display:flex;align-items:center;gap:16px;height:57px;font-size:17px;text-align:left}
#app-prototype .ap-menu button+button{border-top:1px solid var(--ap-line)}
#app-prototype .ap-menu svg{width:26px;height:26px;color:var(--ap-ink)}
#app-prototype .ap-filter{font:inherit;font-size:16px}
#app-prototype .ap-card__meta--muted{color:var(--ap-muted);font-size:14px}
#app-prototype .ap-card__meta--muted svg{color:var(--ap-purple)}
#app-prototype .ap-copy{margin-top:4px;font-size:15px;line-height:1.55;color:var(--ap-ink)}
#app-prototype .ap-a{display:block;margin-top:6px;color:var(--ap-purple);text-decoration:underline;text-underline-offset:3px;font-size:15px;text-align:left}
#app-prototype span.ap-a{display:inline;margin:0}
#app-prototype .ap-sec{display:grid;grid-template-columns:1fr auto;align-items:end;margin-top:26px}
#app-prototype .ap-sec h5{grid-column:1/-1;margin:0;font-size:20px;font-weight:600}
#app-prototype .ap-sec h5 span{font-size:15px;font-weight:400;color:var(--ap-muted)}
#app-prototype .ap-sec p{font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
#app-prototype .ap-tile{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;height:104px;padding:16px;border-radius:8px;background:#fff;text-align:left;
  font-size:15px;box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06)}
#app-prototype .ap-tile svg{width:30px;height:30px}
#app-prototype .ap-tile em{font-style:normal;color:var(--ap-muted)}
#app-prototype .ap-services{margin-top:16px;padding:0 16px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06)}
#app-prototype .ap-service{display:flex;align-items:center;justify-content:space-between;height:57px;font-size:16px}
#app-prototype .ap-service+.ap-service{border-top:1px solid var(--ap-line)}
#app-prototype .ap-service[hidden]{display:none}
#app-prototype .ap-outline{width:100%;height:48px;margin-top:16px;border:1px solid var(--ap-purple);border-radius:24px;color:var(--ap-purple);font-size:16px}
#app-prototype .ap-sec--link .ap-link{align-self:end}
#app-prototype .ap-row--flush{padding-top:16px}
#app-prototype .ap-detail--tight{padding-top:0;padding-bottom:12px}
#app-prototype .ap-blogo--mall{background:#fff;color:var(--ap-purple);border:1px solid var(--ap-line)}
#app-prototype .ap-dhead>div{flex:1;min-width:0}
#app-prototype .ap-acts{display:flex;gap:10px;align-self:flex-start}
#app-prototype .ap-acts button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.15)}
#app-prototype .ap-acts svg{width:20px;height:20px}
#app-prototype .ap-acts [aria-pressed="true"] svg{color:var(--ap-purple);fill:var(--ap-purple)}
#app-prototype .ap-hours{display:flex;align-items:center;justify-content:space-between;width:100%;font-size:14px;font-weight:600}
#app-prototype .ap-hours svg{width:20px;height:20px;color:var(--ap-purple);transition:transform .25s}
#app-prototype .ap-hours[aria-expanded="true"] svg{transform:rotate(180deg)}
#app-prototype .ap-week{width:100%;margin-top:8px;border-collapse:collapse;font-size:14px}
#app-prototype .ap-week th{padding:4px 0;font-weight:400;text-align:left}
#app-prototype .ap-week td{padding:4px 0;text-align:right}
#app-prototype .ap-social{display:flex;gap:18px;margin-top:6px}
#app-prototype .ap-social svg{width:24px;height:24px;color:var(--ap-ink)}
#app-prototype .ap-evtitle{font-size:24px;font-weight:600}
#app-prototype .ap-tag--live{display:inline-block;margin-top:10px;padding:3px 8px;border-radius:4px;background:#FCE9F0;color:var(--ap-purple);font-size:13px;font-weight:600}
#app-prototype .ap-evmeta{display:grid;gap:10px;margin:16px 0 12px;padding:0;list-style:none;font-size:15px}
#app-prototype .ap-evmeta li{display:flex;align-items:center;gap:10px}
#app-prototype .ap-evmeta svg{width:20px;height:20px;color:var(--ap-purple)}
#app-prototype .ap-redeem{display:flex;align-items:center;justify-content:center;gap:10px}
#app-prototype .ap-redeem svg{width:22px;height:22px}

/* bottom sheets */
#app-prototype .ap-sheet{position:absolute;inset:0;z-index:12}
#app-prototype .ap-sheet[hidden]{display:none}
#app-prototype .ap-sheet__dim{position:absolute;inset:0;background:rgba(0,0,0,.45)}
#app-prototype .ap-sheet__panel{position:absolute;left:0;right:0;bottom:0;top:70px;display:flex;flex-direction:column;border-radius:16px 16px 0 0;background:#fff}
#app-prototype .ap-sheet__head{flex:none;display:grid;grid-template-columns:72px 1fr 72px;align-items:center;height:56px;padding:0 16px;border-bottom:1px solid var(--ap-line)}
#app-prototype .ap-sheet__head h4{text-align:center;font-size:17px;font-weight:600}
#app-prototype .ap-sheet__head button{color:var(--ap-purple);font-size:16px;text-align:left}
#app-prototype .ap-sheet__head button[data-close]{justify-self:end;display:grid;place-items:center;width:40px;height:40px}
#app-prototype .ap-sheet__body{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;padding:0 16px}
#app-prototype .ap-sheet__body::-webkit-scrollbar{display:none}
#app-prototype .ap-sheet__foot{flex:none;padding:12px 16px 34px;border-top:1px solid var(--ap-line)}
#app-prototype .ap-acc{border-bottom:1px solid var(--ap-line)}
#app-prototype .ap-acc__head{display:flex;align-items:center;justify-content:space-between;width:100%;height:60px;font-size:17px;font-weight:600}
#app-prototype .ap-acc__head svg{width:22px;height:22px;transition:transform .25s}
#app-prototype .ap-acc__head[aria-expanded="true"] svg{transform:rotate(180deg)}
#app-prototype .ap-acc__body{display:grid;gap:12px;padding-bottom:20px}
#app-prototype .ap-acc__body[hidden]{display:none}
#app-prototype .ap-radio{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;border:1px solid var(--ap-line);border-radius:8px;background:var(--ap-bg);font-size:16px}
#app-prototype .ap-radio i{width:22px;height:22px;border:1.5px solid #333;border-radius:50%}
#app-prototype .ap-radio[aria-checked="true"]{border-color:var(--ap-purple);background:#fff}
#app-prototype .ap-radio[aria-checked="true"] i{border-color:var(--ap-purple);background:var(--ap-purple);box-shadow:inset 0 0 0 4px #fff}
#app-prototype .ap-select{position:relative;display:block}
#app-prototype .ap-select select{width:100%;height:48px;padding:0 44px 0 16px;border:1px solid var(--ap-line);border-radius:8px;background:var(--ap-bg);font:inherit;font-size:16px;color:var(--ap-ink);appearance:none;-webkit-appearance:none}
#app-prototype .ap-select svg{position:absolute;right:14px;top:12px;pointer-events:none}
#app-prototype .ap-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#app-prototype .ap-chips{display:flex;flex-wrap:wrap;gap:10px}
#app-prototype .ap-fchip{display:flex;align-items:center;gap:10px;height:40px;padding:0 12px 0 16px;border:1px solid #d6d6d6;border-radius:20px;font-size:15px}
#app-prototype .ap-fchip i{width:20px;height:20px;border:1.5px solid #333;border-radius:50%}
#app-prototype .ap-fchip[aria-pressed="true"]{border-color:var(--ap-purple);background:#FCE9F0;color:var(--ap-purple);font-weight:600}
#app-prototype .ap-fchip[aria-pressed="true"] i{border-color:var(--ap-purple);background:var(--ap-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* toast for parts of the app the designs don't cover */
#app-prototype .ap-toast{position:absolute;left:24px;right:24px;bottom:110px;z-index:14;padding:12px 16px;border-radius:12px;background:rgba(26,26,26,.92);color:#fff;
  font-size:14px;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}
#app-prototype .ap-toast.is-on{opacity:1;transform:none}
#app-prototype .ap-topbar{position:absolute;inset:0 0 auto;z-index:4;height:99px;padding:47px 64px 0;display:flex;align-items:center;justify-content:center;
  background:#fff;box-shadow:0 1px 0 var(--ap-line);font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;pointer-events:none;transition:opacity .2s}
#app-prototype .ap-view.is-scrolled .ap-topbar{opacity:1}
#app-prototype .ap-view.is-scrolled .ap-heroBtn{box-shadow:none}

/* keyboard focus inside the phone: the page's white-halo ring reads as a stray box on app UI */
#app-prototype .ap-screen :focus-visible{outline:2px solid var(--ap-purple);outline-offset:-2px;box-shadow:none}
/* ---- Profile, Family, Inbox, Transactions (colours and type from the ANTUM/Miza tokens) ---- */
#app-prototype .ap-profile{position:relative}
#app-prototype .ap-profile__open{position:absolute;left:0;right:0;top:0;z-index:1;height:205px}
#app-prototype .ap-view[data-view="profile"] .ap-profile{margin-top:16px}
#app-prototype .ap-nav--wide{grid-template-columns:116px 1fr 116px}
#app-prototype .ap-navtext{justify-self:end;padding:0 12px;color:var(--ap-purple);font-size:16px}
#app-prototype .ap-nav .ap-iconbtn{position:relative}
#app-prototype .ap-badge::after{content:"";position:absolute;top:9px;right:8px;width:9px;height:9px;border-radius:50%;background:var(--ap-purple);box-shadow:0 0 0 2px #fff}
#app-prototype .ap-group{margin:24px 16px 0}
#app-prototype .ap-group:last-child{margin-bottom:24px}
#app-prototype .ap-group h5{margin:0 0 10px;font-size:17px;font-weight:600}
#app-prototype .ap-rows{display:flex;flex-direction:column;padding:0 16px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
#app-prototype .ap-rows button{display:flex;align-items:center;gap:8px;height:56px;font-size:16px;text-align:left}
#app-prototype .ap-rows button+button{border-top:1px solid #e0e0e0}
#app-prototype .ap-rows button>span:first-child{flex:1}
#app-prototype .ap-rows svg{width:20px;height:20px;color:var(--ap-dgrey)}
#app-prototype .ap-new{color:var(--ap-purple);font-size:14px}

/* contact-card rows: family members, transactions */
#app-prototype .ap-cards{margin:16px;border-radius:16px;background:#fff;overflow:hidden}
#app-prototype .ap-crow{position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:77px;padding:8px 16px;text-align:left}
#app-prototype .ap-crow+.ap-crow::before,#app-prototype .ap-note+.ap-note::before,#app-prototype .ap-legend+.ap-legend::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:#e0e0e0}
#app-prototype .ap-thumb{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover}
#app-prototype .ap-thumb--sq{border-radius:8px}
#app-prototype .ap-thumb--ini{display:grid;place-items:center;background:#FCE9F0;color:var(--ap-purple);font-size:14px;font-weight:600}
#app-prototype .ap-crow__t{flex:1;min-width:0;display:flex;flex-direction:column}
#app-prototype .ap-crow__t b{font-weight:400;font-size:16px;line-height:24px;color:var(--ap-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#app-prototype .ap-crow__t small{display:flex;align-items:center;gap:8px;font-size:14px;line-height:20px;color:var(--ap-muted)}
#app-prototype .ap-crow__t small svg{width:16px;height:16px;color:var(--ap-ink)}
#app-prototype .ap-crow__t small .ap-ic-pur{color:var(--ap-purple)}
#app-prototype .ap-crow__r{flex:none;text-align:right;font-size:14px;line-height:20px;color:var(--ap-muted)}
#app-prototype .ap-crow__r b{display:block;font-weight:400;font-size:16px;line-height:24px;color:var(--ap-ink)}
#app-prototype .is-cancelled .ap-crow__r b{text-decoration:line-through}
#app-prototype .ap-crow.is-pending b{color:var(--ap-muted)}
#app-prototype .ap-kebab{display:grid;place-items:center;width:40px;height:40px;margin-right:-8px;color:var(--ap-muted)}
#app-prototype .ap-formcta{flex:none;padding:12px 16px 34px}
#app-prototype .ap-formcta[hidden]{display:none}
#app-prototype .ap-btn{width:100%;height:48px;border-radius:26px;background:var(--ap-purple);color:#fff;font-size:16px;transition:background-color .2s}
#app-prototype .ap-btn--outline{border:1px solid var(--ap-purple);background:none;color:var(--ap-purple)}
#app-prototype .ap-btn:disabled{background:#F08DB1;cursor:default}

/* illustration screens */
#app-prototype .ap-view--white{background:#fff}
#app-prototype .ap-illus{display:flex;flex-direction:column}
#app-prototype .ap-illus__body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:16px 16px 0;text-align:center}
#app-prototype .ap-illus--bare .ap-illus__body{padding-top:47px}
#app-prototype .ap-illus__art{display:flex;align-items:flex-end;justify-content:center;height:254px}
#app-prototype .ap-illus__art img{max-width:300px;max-height:254px}
#app-prototype .ap-illus h4{margin-top:16px;font-size:20px;line-height:32px;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-illus__text{font-size:16px;line-height:24px;color:var(--ap-ink)}
#app-prototype .ap-illus__text ul{display:inline-block;margin:0;padding:0 0 0 22px;list-style:disc;text-align:left}
#app-prototype .ap-illus__ctas{display:grid;gap:16px;padding:24px 16px 34px}

/* invite form */
#app-prototype .ap-form{display:grid;gap:16px;padding:16px}
#app-prototype .ap-flabel{display:block;margin-bottom:4px;font-size:16px;font-weight:600}
#app-prototype .ap-flabel small{font-size:14px;font-weight:400;color:var(--ap-muted)}
#app-prototype .ap-tf{display:flex;align-items:center;gap:8px;height:50px;padding:0 16px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;transition:border-color .15s}
#app-prototype .ap-tf:focus-within{border-color:var(--ap-purple)}
#app-prototype .ap-tf input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;color:var(--ap-ink);font:inherit;font-size:16px}
#app-prototype .ap-tf input::placeholder{color:#a8a8a8}
#app-prototype .ap-tf .ap-flag{width:24px;height:24px}
#app-prototype .ap-tf svg{width:20px;height:20px;margin-left:-4px}
#app-prototype .ap-tfsep{width:1px;height:24px;background:#e0e0e0}
#app-prototype .ap-cc{color:#a8a8a8;font-size:16px}
#app-prototype .ap-q{margin:16px 0 0;font-size:16px;font-weight:600}
#app-prototype .ap-opts{display:grid;gap:16px}
#app-prototype .ap-opt{display:flex;align-items:center;justify-content:space-between;height:48px;padding:0 16px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;font-size:16px}
#app-prototype .ap-opt i{width:22px;height:22px;border:1.5px solid #333;border-radius:50%}
#app-prototype .ap-opt[aria-checked="true"]{border-color:var(--ap-purple);background:#FCE9F0;color:var(--ap-purple);font-weight:600}
#app-prototype .ap-opt[aria-checked="true"] i{border-color:var(--ap-purple);background:var(--ap-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}

/* action sheet + alert */
#app-prototype .ap-asheet,#app-prototype .ap-alert{position:absolute;inset:0;z-index:13;background:rgba(0,0,0,.45)}
#app-prototype .ap-asheet{display:flex;flex-direction:column;justify-content:flex-end;padding:0 16px 34px}
#app-prototype .ap-alert{display:grid;place-items:center}
#app-prototype .ap-asheet[hidden],#app-prototype .ap-alert[hidden]{display:none}
#app-prototype .ap-asheet__grp{display:flex;flex-direction:column;padding:0 16px;border-radius:16px;background:#fff}
#app-prototype .ap-asheet__grp button{height:57px;font-size:16px}
#app-prototype .ap-asheet__grp button+button{border-top:1px solid #e0e0e0}
#app-prototype .ap-asheet .is-danger{color:#e74c3c}
#app-prototype .ap-asheet__cancel{width:100%;height:57px;margin-top:16px;border-radius:16px;background:#fff;font-size:16px;font-weight:600}
#app-prototype .ap-alert__box{width:240px;border-radius:14px;background:#fff;overflow:hidden}
#app-prototype .ap-alert__box p{margin:0;padding:16px;font-size:16px;line-height:24px;border-bottom:1px solid #cfcfcf}
#app-prototype .ap-alert__acts{display:grid;grid-template-columns:1fr 1fr;height:56px}
#app-prototype .ap-alert__acts button{font-size:16px}
#app-prototype .ap-alert__acts button+button{border-left:1px solid #cfcfcf}
#app-prototype .ap-alert .is-danger{color:#b83737}

/* inbox */
#app-prototype .ap-itabs{flex:none;display:grid;grid-template-columns:1fr 1fr;height:45px;padding:0 16px;background:#fff}
#app-prototype .ap-itabs button{position:relative;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-itabs [aria-current="true"]{color:var(--ap-ink);font-weight:600}
#app-prototype .ap-itabs [aria-current="true"]::after{content:"";position:absolute;left:50%;bottom:0;width:50px;height:4px;margin-left:-25px;border-radius:4px 4px 0 0;background:var(--ap-purple)}
#app-prototype .ap-note{position:relative;display:flex;align-items:flex-start;gap:16px;width:100%;padding:16px;text-align:left}
#app-prototype .ap-note__t{flex:1;min-width:0;display:grid;gap:8px}
#app-prototype .ap-note__top{display:flex;align-items:center;justify-content:space-between}
#app-prototype .ap-chipb{padding:4px 8px;border-radius:4px;background:rgba(59,128,184,.08);color:#3b80b8;font-size:12px;font-weight:600;line-height:16px}
#app-prototype .ap-note__date{display:flex;align-items:center;gap:4px;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-note.is-unread .ap-note__date{color:var(--ap-purple)}
#app-prototype .ap-note.is-unread .ap-note__date::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ap-purple)}
#app-prototype .ap-note__title{font-size:16px;line-height:24px}
#app-prototype .ap-note.is-unread .ap-note__title{font-weight:600}
#app-prototype .ap-mthumb{display:grid;place-items:center;background:#000;color:#F08DB1;font-size:22px;font-weight:600}

/* transactions */
#app-prototype .ap-ptcard{margin:16px 16px 8px;border-radius:8px;background:#fff;text-align:center;
  box-shadow:0 0 3.9px rgba(0,0,0,.06),0 0 6.7px rgba(0,0,0,.06)}
#app-prototype .ap-ptcard__top{padding:16px 16px 8px;border-radius:8px;background:#FCE9F0;color:var(--ap-purple)}
#app-prototype .ap-ptcard p{margin:0;font-size:14px;line-height:20px}
#app-prototype .ap-ptcard strong{display:block;font:600 28px/48px Helvetica,Arial,sans-serif}
#app-prototype .ap-ptcard .ap-sar{color:rgba(219,46,109,.6)}
#app-prototype .ap-ptcard .ap-sar b{font-weight:600}
#app-prototype .ap-ptcard .ap-exp{padding:18px 16px 19px;color:var(--ap-purple)}
#app-prototype .ap-day{margin:8px 16px 8px;font-size:16px;line-height:24px;font-weight:600}
#app-prototype .ap-cards--tx{margin-top:0}
#app-prototype .ap-txnone{padding:40px 24px;text-align:center;color:var(--ap-muted)}
#app-prototype .ap-donut{display:grid;place-items:center;padding:16px 0 8px}
#app-prototype .ap-donut svg{width:279px;height:279px}
#app-prototype .ap-donut .ap-d1{font-size:16px;fill:#000}
#app-prototype .ap-donut .ap-d2{font-size:28px;font-weight:600;fill:#000}
#app-prototype .ap-cards--legend{margin-top:0}
#app-prototype .ap-legend{position:relative;display:flex;align-items:center;gap:16px;width:100%;height:57px;padding:0 16px;font-size:16px;text-align:left}
#app-prototype .ap-legend>span{flex:1}
#app-prototype .ap-legend i{position:relative;width:22px;height:16px}
#app-prototype .ap-legend i::before{content:"";position:absolute;left:0;top:2px;width:13px;height:13px;border-radius:50%;background:var(--c)}
#app-prototype .ap-legend i::after{content:"";position:absolute;left:15px;top:0;width:6px;height:6px;border-radius:50%;background:var(--c);opacity:.6;box-shadow:0 9px 0 var(--c)}
#app-prototype .ap-legend em{min-width:72px;font-style:normal;color:var(--ap-muted);text-align:right}
#app-prototype .ap-legend svg:last-child{width:18px;height:18px;color:#999}
#app-prototype .ap-txhero{height:230px;overflow:hidden}
#app-prototype .ap-txhero img{width:100%;height:100%;object-fit:cover}
#app-prototype .ap-txcard{position:relative;margin-top:-20px;padding-bottom:24px;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 1px 8px rgba(0,0,0,.12),0 3px 4px rgba(0,0,0,.08)}
#app-prototype .ap-txdet{margin:0 16px;padding:16px 0 4px;border-top:1px solid #e0e0e0}
#app-prototype .ap-txdet h5{margin-bottom:8px;font-size:16px;font-weight:600}
#app-prototype .ap-txdet dl{margin:0}
#app-prototype .ap-txdet dt{font-size:14px;line-height:20px;color:var(--ap-muted)}
#app-prototype .ap-txdet dd{margin:0 0 16px;font-size:16px;line-height:24px}
#app-prototype .ap-help{display:flex;align-items:center;gap:16px;margin:0 16px;padding:16px 0;border-top:1px solid #e0e0e0;font-size:16px}
#app-prototype .ap-help .ap-a{display:inline;margin:0;font-size:16px}

/* ---- My Benefits, offer detail, confirm payment, vouchers ---- */
#app-prototype .ap-row--cats{gap:16px;padding:16px 16px 12px}
#app-prototype .ap-cat{flex:none;display:flex;flex-direction:column;width:112px;height:104px;border-radius:8px;background:#fff;overflow:hidden;scroll-snap-align:start;
  box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06)}
#app-prototype .ap-cat img{width:112px;height:64px;object-fit:cover}
#app-prototype .ap-cat span{flex:1;display:grid;place-items:center;font-size:14px;font-weight:600}
#app-prototype .ap-pager{display:flex;justify-content:center;gap:6px;margin:-8px 0 8px}
#app-prototype .ap-pager i{width:8px;height:8px;border-radius:50%;background:#d6d6d6}
#app-prototype .ap-pager i.on{background:var(--ap-purple)}
#app-prototype .ap-view[data-view="mybenefits"] .ap-sechead{padding-top:16px}
#app-prototype .ap-ptitle{font-size:24px;line-height:32px;font-weight:600}
#app-prototype .ap-detail--offer>p{margin-top:12px;font-size:16px;line-height:24px;color:var(--ap-ink)}
#app-prototype .ap-detail--offer h5{margin-top:24px;font-size:20px;line-height:32px;font-weight:600}
#app-prototype .ap-partner{margin-top:24px;padding:16px;border-radius:16px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.06),0 4px 14px rgba(0,0,0,.06)}
#app-prototype .ap-partner__head{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid #e0e0e0}
#app-prototype .ap-partner__head h5{margin:0;font-size:20px;line-height:28px;font-weight:600}
#app-prototype .ap-partner__head p{margin:0;font-size:14px;color:var(--ap-ink)}
#app-prototype .ap-plogo{flex:none;display:grid;place-items:center;align-content:center;width:52px;height:52px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;
  font-size:13px;font-weight:600;letter-spacing:.3px;color:var(--ap-ink);overflow:hidden;line-height:1.1;text-align:center}
#app-prototype .ap-plogo b{display:block;font-size:12px;letter-spacing:-1px}
#app-prototype .ap-plogo i{display:block;font-style:normal;font-size:9px;font-weight:600;letter-spacing:0}
#app-prototype .ap-plogo--sm b{font-size:9px}
#app-prototype .ap-plogo--sm i{font-size:6.5px}
#app-prototype .ap-plogo--txt{border:0;background:#111;color:#fff}
#app-prototype .ap-plogo img{width:100%;height:100%;object-fit:cover}
#app-prototype .ap-plogo--sm{width:40px;height:40px;font-size:11px}
#app-prototype .ap-partner dl{margin:16px 0 0}
#app-prototype .ap-partner dt{margin-top:16px;font-size:12px;letter-spacing:.4px;text-transform:uppercase;color:var(--ap-muted)}
#app-prototype .ap-partner dt:first-child{margin-top:0}
#app-prototype .ap-partner dd{margin:4px 0 0;font-size:16px}
#app-prototype .ap-cta--offer{text-align:center}
#app-prototype .ap-offer{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font-size:14px;line-height:20px}
#app-prototype .ap-offer--date{margin-top:8px}
#app-prototype .ap-offer svg{width:18px;height:18px}
#app-prototype .ap-cta--offer .ap-redeem{margin-top:16px;font-weight:400}
#app-prototype .ap-illus__text p{margin:0 0 8px}

/* confirm payment sheet + booking sheet */
#app-prototype .ap-pay,#app-prototype .ap-bsheet{position:absolute;inset:0;z-index:13;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,.45)}
#app-prototype .ap-pay[hidden],#app-prototype .ap-bsheet[hidden]{display:none}
#app-prototype .ap-pay__in,#app-prototype .ap-bsheet__in{display:grid;padding:0 16px 34px;border-radius:16px 16px 0 0;background:#fff}
#app-prototype .ap-pay__head{display:grid;grid-template-columns:72px 1fr 72px;align-items:center;height:56px}
#app-prototype .ap-pay__head h4{text-align:center;font-size:17px;font-weight:600}
#app-prototype .ap-pay__head button{justify-self:end;color:var(--ap-purple);font-size:16px}
#app-prototype .ap-pay__item{display:flex;align-items:center;gap:16px;margin-top:8px;padding:16px;border:1px solid #e0e0e0;border-radius:8px}
#app-prototype .ap-pay__item b{display:block;font-weight:400;font-size:16px;line-height:24px}
#app-prototype .ap-pay__item small{font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-pay__lead{margin:32px 0 0;text-align:center;font-size:18px}
#app-prototype .ap-pay__amt{margin:4px 0 0;text-align:center;font-size:40px;line-height:48px;font-weight:600}
#app-prototype .ap-pay__unit{margin:4px 0 24px;text-align:center;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-pay__low{margin:-12px 0 16px;text-align:center;font-size:14px;color:#b83737}
#app-prototype .ap-bsheet__in{gap:16px;padding-top:12px}
#app-prototype .ap-grab{justify-self:center;width:36px;height:4px;border-radius:2px;background:#d6d6d6;margin-bottom:8px}
#app-prototype .ap-btn{display:flex;align-items:center;justify-content:center;gap:10px}
#app-prototype .ap-btn svg{width:22px;height:22px}

/* vouchers */
#app-prototype .ap-itabs--one{grid-template-columns:1fr}
#app-prototype .ap-vrow{min-height:76px}
#app-prototype .ap-vrow .ap-crow__t b{font-weight:600;white-space:normal}
#app-prototype .ap-vrow>svg{width:20px;height:20px;color:var(--ap-ink)}
#app-prototype .ap-vqr{display:grid;justify-items:center;margin-top:24px}
#app-prototype .ap-qrcode{width:98px;height:98px}
#app-prototype .ap-vqr p{margin:14px 0 0;font-size:16px;font-weight:600;letter-spacing:.5px}
#app-prototype .ap-vqr .ap-btn{margin-top:12px}
#app-prototype .ap-qrbig{display:grid;justify-items:center;align-content:start;min-height:calc(100% - 32px);margin:16px;padding:16px;border-radius:16px;background:#fff}
#app-prototype .ap-qrbig .ap-qrcode{width:100%;height:auto}
#app-prototype .ap-qrbig p{margin:16px 0 0;font-size:24px;font-weight:600;letter-spacing:.5px}
#app-prototype .ap-vcard{position:relative;margin-top:-140px;border-radius:16px 16px 0 0;background:#fff;min-height:500px}
#app-prototype .ap-vcard .ap-partner__head{margin:0 16px;padding:24px 0 16px}
#app-prototype .ap-vexp{margin:4px 0 0;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-vcard .ap-detail>p:not(.ap-vexp){margin-top:16px;font-size:16px;line-height:24px;color:var(--ap-ink)}
#app-prototype .ap-vbtns{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
#app-prototype .ap-mthumb--txt{color:#fff;font-size:12px}

/* ---- Profile header, account edits, tiers, interests, wishlist ---- */
#app-prototype .ap-phead{display:flex;align-items:center;gap:16px;margin:16px 16px 0;padding:16px;border-radius:12px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
#app-prototype .ap-pavatar{position:relative;flex:none;width:76px;height:76px}
#app-prototype .ap-pavatar img{width:76px;height:76px;border-radius:50%;object-fit:cover}
#app-prototype .ap-cam{position:absolute;right:-2px;bottom:-2px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ap-purple);color:#fff;box-shadow:0 0 0 2px #fff}
#app-prototype .ap-cam svg{width:16px;height:16px}
#app-prototype .ap-phead__t{min-width:0}
#app-prototype .ap-phead__t h3{font-size:20px;line-height:26px;font-weight:600}
#app-prototype .ap-phead__t p{margin:2px 0 0;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-pcard{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:6px 12px;border-radius:16px;background:#FCE9F0;color:var(--ap-purple);font-size:14px;font-weight:600}
#app-prototype .ap-pcard svg{width:16px;height:16px}
#app-prototype .ap-pline{display:grid;gap:8px;width:calc(100% - 32px);margin:12px 16px 0;padding:14px 16px;border-radius:12px;background:#fff;text-align:left;box-shadow:0 1px 3px rgba(0,0,0,.05)}
#app-prototype .ap-pline__top{display:flex;align-items:center;gap:8px;font-size:16px}
#app-prototype .ap-pline__top b{flex:1;font-weight:600}
#app-prototype .ap-pline__top svg:last-child{width:18px;height:18px;color:#999}
#app-prototype .ap-pline .ap-progress{margin:0}
#app-prototype .ap-pline small{font-size:13px;color:var(--ap-muted)}
/* membership card */
#app-prototype .ap-mcard{position:relative;height:200px;padding:20px;border-radius:16px;color:#fff;background:linear-gradient(135deg,#DB2E6D,#7A1A55 55%,#20113E);box-shadow:0 10px 24px -10px rgba(0,0,0,.5)}
#app-prototype .ap-mcard .ap-logo{font-size:24px;color:#fff}
#app-prototype .ap-mcard__tier{position:absolute;right:20px;top:24px;margin:0;font-size:12px;letter-spacing:1.5px;color:#c9c9c9}
#app-prototype .ap-mcard h4{position:absolute;left:20px;bottom:44px;font-size:20px;font-weight:600}
#app-prototype .ap-mcard h4+p{position:absolute;left:20px;bottom:20px;margin:0;font-size:13px;color:#c9c9c9;letter-spacing:.5px}
#app-prototype .ap-mqr{display:grid;justify-items:center;margin-top:16px;padding:24px 16px;border-radius:16px;background:#fff;text-align:center}
#app-prototype .ap-mqr .ap-qrcode{width:200px;height:200px}
#app-prototype .ap-mqr p{margin:14px 0 4px;font-size:20px;font-weight:600;letter-spacing:1px}
#app-prototype .ap-mqr span{font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-wallet{margin-top:16px;background:#fff}
/* photo crop */
#app-prototype .ap-view--crop{background:#000;color:#fff}
#app-prototype .ap-cropbar{flex:none;display:grid;grid-template-columns:80px 1fr 80px;align-items:center;height:99px;padding:47px 16px 0}
#app-prototype .ap-cropbar h4{text-align:center;font-size:17px;font-weight:600}
#app-prototype .ap-cropbar button{font-size:16px;color:#fff;text-align:left}
#app-prototype .ap-cropbar button:last-child{text-align:right;color:#F08DB1;font-weight:600}
#app-prototype .ap-cropbody{display:flex;flex-direction:column;align-items:center;padding-top:60px}
#app-prototype .ap-cropstage{position:relative;width:300px;height:300px;overflow:hidden;touch-action:none;cursor:grab}
#app-prototype .ap-cropstage img{position:absolute;left:50%;top:50%;max-width:none;transform-origin:center;user-select:none;pointer-events:none}
#app-prototype .ap-cropmask{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 400px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.7);pointer-events:none}
#app-prototype .ap-zoom{display:flex;align-items:center;gap:12px;width:300px;margin-top:40px;color:#fff}
#app-prototype .ap-zoom input{flex:1;accent-color:#F08DB1}
#app-prototype .ap-cropbody p{margin:16px 0 0;font-size:13px;color:#aaa}
/* forms */
#app-prototype .ap-fld{display:block}
#app-prototype .ap-tf--select{position:relative;padding-right:8px}
#app-prototype .ap-tf select{flex:1;height:100%;border:0;background:none;font:inherit;font-size:16px;color:var(--ap-ink);appearance:none;-webkit-appearance:none;outline:0}
#app-prototype .ap-tf--select svg{pointer-events:none}
#app-prototype .ap-tf input[type="date"]{color:var(--ap-ink)}
#app-prototype .ap-fld.is-bad .ap-tf{border-color:#b83737}
#app-prototype .ap-ferr{margin:6px 0 0;font-size:13px;color:#b83737}
#app-prototype .ap-ferr[hidden]{display:none}
#app-prototype .ap-fnote{margin:0;font-size:15px;line-height:22px;color:var(--ap-dgrey)}
#app-prototype .ap-rows--ro{margin-top:8px}
#app-prototype .ap-rows--ro button{height:64px}
#app-prototype .ap-rows--ro button>span:first-child{display:grid}
#app-prototype .ap-rows--ro small{font-size:13px;color:var(--ap-muted)}
#app-prototype .ap-rows--ro b{font-weight:400;font-size:16px}
#app-prototype .ap-rows--ro em{font-style:normal;color:var(--ap-purple);font-size:14px}
#app-prototype .ap-eye{display:grid;place-items:center;width:36px;height:36px;margin-right:-8px;color:var(--ap-muted)}
#app-prototype .ap-eye[aria-pressed="true"]{color:var(--ap-purple)}
#app-prototype .ap-eye svg{width:20px;height:20px}
#app-prototype .ap-strength{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:-6px}
#app-prototype .ap-strength i{height:4px;border-radius:2px;background:#e0e0e0;transition:background-color .2s}
#app-prototype .ap-strength[data-level="1"] i:nth-child(-n+1){background:#b83737}
#app-prototype .ap-strength[data-level="2"] i:nth-child(-n+2){background:#eb842d}
#app-prototype .ap-strength[data-level="3"] i:nth-child(-n+3){background:#d4b20f}
#app-prototype .ap-strength[data-level="4"] i{background:#2e9e6a}
#app-prototype .ap-rules{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-rules li{display:flex;align-items:center;gap:8px}
#app-prototype .ap-rules svg{width:16px;height:16px}
#app-prototype .ap-rules li.is-ok{color:#2e9e6a}
#app-prototype .ap-otp h4{font-size:22px;font-weight:600}
#app-prototype .ap-otpboxes{display:grid;grid-template-columns:repeat(4,64px);gap:14px;justify-content:center;margin:12px 0 4px}
#app-prototype .ap-otpboxes input{height:72px;border:1px solid #e0e0e0;border-radius:12px;background:#fff;text-align:center;font:inherit;font-size:28px;font-weight:600;color:var(--ap-ink);outline:0}
#app-prototype .ap-otpboxes input:focus{border-color:var(--ap-purple);box-shadow:0 0 0 3px rgba(219,46,109,.15)}
#app-prototype .ap-otpresend{margin:0;text-align:center;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-otpresend .ap-a{display:inline;margin:0;font-size:14px}
#app-prototype .ap-otphint{margin:0;text-align:center;font-size:12px;color:#a8a8a8}
/* tiers */
#app-prototype .ap-tierhead{display:grid;gap:8px;margin:16px;padding:16px;border-radius:12px;background:#fff}
#app-prototype .ap-tierhead p{margin:0;font-size:16px}
#app-prototype .ap-tierhead .ap-progress{margin:0}
#app-prototype .ap-tierhead small{font-size:13px;color:var(--ap-muted)}
#app-prototype .ap-row--tiers{gap:16px;padding:0 16px 20px}
#app-prototype .ap-tier{flex:none;width:300px;min-height:330px;padding:20px;border-radius:16px;scroll-snap-align:start;color:#fff}
#app-prototype .ap-tier--black{background:linear-gradient(150deg,#3a3a3a,#000)}
#app-prototype .ap-tier--silver{background:linear-gradient(150deg,#e9ebee,#9aa0a8);color:var(--ap-ink)}
#app-prototype .ap-tier--gold{background:linear-gradient(150deg,#f3d98b,#b8862d);color:var(--ap-ink)}
#app-prototype .ap-tier__at{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;opacity:.85}
#app-prototype .ap-tier__at svg{width:16px;height:16px}
#app-prototype .ap-tier h4{margin-top:8px;font-size:30px;font-weight:600;letter-spacing:.5px}
#app-prototype .ap-tier ul{display:grid;gap:12px;margin:20px 0 0;padding:0;list-style:none;font-size:15px;line-height:20px}
#app-prototype .ap-tier li{display:flex;gap:10px;opacity:.75}
#app-prototype .ap-tier li.is-on{opacity:1}
#app-prototype .ap-tier li svg{width:18px;height:18px;flex:none}
#app-prototype .ap-tiernote{margin:8px 24px 24px;text-align:center;font-size:13px;color:var(--ap-muted)}
/* interests */
#app-prototype .ap-ichips{display:flex;flex-wrap:wrap;gap:10px}
#app-prototype .ap-ichip{display:flex;align-items:center;gap:8px;height:42px;padding:0 16px;border:1px solid #d6d6d6;border-radius:21px;background:#fff;font-size:15px}
#app-prototype .ap-ichip svg{width:18px;height:18px}
#app-prototype .ap-ichip[aria-pressed="true"]{border-color:var(--ap-purple);background:var(--ap-purple);color:#fff}
#app-prototype .ap-icount{margin:0;font-size:14px;color:var(--ap-muted)}
/* wishlist hearts on cards */
#app-prototype .ap-chip.is-on{background:var(--ap-purple)}
#app-prototype .ap-chip.is-on svg{fill:#fff}
#app-prototype .ap-heroBtn--fav[aria-pressed="true"] svg{fill:var(--ap-purple);color:var(--ap-purple)}
#app-prototype .ap-empty .ap-btn{margin-top:16px}

/* ---- Points calculator (Figma: Mobile Points) ---- */
#app-prototype .ap-calc{display:grid;gap:24px;padding:24px;border-radius:16px;background:#fff;box-shadow:0 0 2.5px rgba(0,0,0,.06),0 0 5px rgba(0,0,0,.1)}
#app-prototype .ap-calc__head h4{display:flex;align-items:center;gap:6px;font-size:20px;line-height:32px;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-calc__head h4 .ap-coin{width:23px;height:23px}
#app-prototype .ap-calc__head p{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--ap-ink)}
#app-prototype .ap-cfield{position:relative;display:flex;flex-direction:column;justify-content:center;height:52px;margin-top:-8px;padding:0 44px 0 16px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;box-shadow:inset 0 -1px 0 var(--ap-purple)}
#app-prototype .ap-cfield+.ap-cfield{margin-top:-8px}
#app-prototype .ap-cfield span{font-size:12px;line-height:16px;color:var(--ap-purple)}
#app-prototype .ap-cfield select,#app-prototype .ap-cfield input{width:100%;height:24px;padding:0;border:0;outline:0;background:none;font:inherit;font-size:16px;line-height:24px;color:var(--ap-ink);appearance:none;-webkit-appearance:none}
#app-prototype .ap-cfield>svg{position:absolute;right:14px;top:14px;pointer-events:none}
#app-prototype .ap-cfield:focus-within{border-color:var(--ap-purple)}
#app-prototype .ap-swap{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
#app-prototype .ap-swap>div{display:grid;justify-items:center;gap:4px;width:64px;font-size:16px;line-height:24px}
#app-prototype .ap-swap b{font-weight:600}
#app-prototype .ap-swapbtn{display:grid;place-items:center;width:48px;height:48px;border:1px solid #e0e0e0;border-radius:24px;background:#f8f8f8;color:var(--ap-purple)}
#app-prototype .ap-cres{display:grid;border-top:1px solid #e0e0e0;margin-top:-4px}
#app-prototype .ap-cone{display:flex;align-items:center;justify-content:space-between;padding:16px 4px;border-bottom:1px solid #e0e0e0;font-size:14px;color:var(--ap-ink)}
#app-prototype .ap-cone b{display:flex;align-items:center;gap:8px;font-size:24px;line-height:32px;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-cone small{font-size:16px;font-weight:400}
#app-prototype .ap-cch{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid #e0e0e0}
#app-prototype .ap-clogo{flex:none;display:grid;place-items:center;width:62px;height:62px;padding:4px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;overflow:hidden}
#app-prototype .ap-clogo img{width:52px;height:52px;object-fit:cover}
#app-prototype .ap-clogo--malls{background:#00546e}
#app-prototype .ap-clogo--fit img{object-fit:contain}
#app-prototype .ap-clogo--txt{background:#111;color:#fff;font-size:14px;font-weight:600}
#app-prototype .ap-cch__t{flex:1;min-width:0;display:grid}
#app-prototype .ap-cch__t b{font-size:16px;line-height:24px;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-cch__t small{font-size:14px;line-height:20px;color:var(--ap-ink)}
#app-prototype .ap-cch__t .ap-link{font-size:14px;line-height:20px;justify-self:start;white-space:nowrap;text-align:left}
#app-prototype .ap-cch__t .ap-link svg{width:16px;height:16px}
#app-prototype .ap-cch__p{display:flex;align-items:center;gap:4px;font-size:24px;line-height:32px;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-cbtns{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#app-prototype .ap-cbtn{height:38px;border:1px solid var(--ap-purple);border-radius:19px;background:var(--ap-purple);color:#fff;font-size:14px}
#app-prototype .ap-cbtn--o{background:none;color:var(--ap-purple)}
#app-prototype .ap-calcpromo{display:flex;align-items:center;gap:14px;width:calc(100% - 32px);margin:16px 16px 0;padding:14px 16px;border-radius:12px;background:#FCE9F0;text-align:left}
#app-prototype .ap-calcpromo>svg:first-child{width:28px;height:28px;color:var(--ap-purple)}
#app-prototype .ap-calcpromo span{flex:1;display:grid}
#app-prototype .ap-calcpromo b{font-size:15px}
#app-prototype .ap-calcpromo small{font-size:13px;color:var(--ap-muted)}
#app-prototype .ap-calcpromo>svg:last-child{width:18px;height:18px;color:var(--ap-purple)}

/* the QR badge on Home's profile card opens the expanded QR, above the card's own tap area */
#app-prototype .ap-profile .ap-qr{z-index:2}
#app-prototype .ap-qrbig .ap-qrcode{width:311px;height:311px;max-width:100%}
#app-prototype .ap-qrbig p{color:var(--ap-ink)}

/* calculator: the grid track must never grow past the card (long numbers widened it) */
#app-prototype .ap-calc{grid-template-columns:minmax(0,1fr)}
#app-prototype .ap-cch__t .ap-link{display:inline;white-space:normal}
#app-prototype .ap-cch__t .ap-link svg{display:inline-block;vertical-align:-3px}
#app-prototype .ap-cch__p{flex:none}
#app-prototype .ap-cnum.is-l{font-size:20px}
#app-prototype .ap-cnum.is-xl{font-size:16px}
#app-prototype .ap-cnum.is-l .ap-coin,#app-prototype .ap-cnum.is-xl .ap-coin{width:18px;height:18px}

/* Home: the QR badge on the photo is its own clearly labelled control, 44px to tap (was a 36px unlabelled circle) */
#app-prototype .ap-profile .ap-qr{right:-52px;bottom:-2px;display:flex;align-items:center;gap:6px;width:auto;height:44px;padding:0 16px 0 12px;border-radius:22px;
  background:#fff;color:var(--ap-purple);font-size:15px;font-weight:600;letter-spacing:.3px;box-shadow:0 2px 8px rgba(0,0,0,.2)}
#app-prototype .ap-profile .ap-qr svg{width:22px;height:22px}
/* hit area reaches 52px even though the phone is drawn smaller than real size */
#app-prototype .ap-profile .ap-qr::after{content:"";position:absolute;inset:-6px}

/* Inbox tabs with unread counts + Offers list */
#app-prototype .ap-itabs i{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:6px;padding:0 5px;border-radius:9px;background:var(--ap-purple);color:#fff;font-size:11px;font-style:normal;font-weight:600;vertical-align:1px}
#app-prototype .ap-itabs i:empty{display:none}
#app-prototype .ap-ohead{display:flex;align-items:center;justify-content:space-between;margin:16px 16px 0;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-ohead .ap-link{font-size:14px}
#app-prototype .ap-offer-row{position:relative;display:flex;gap:14px;width:100%;padding:16px;text-align:left}
#app-prototype .ap-offer-row+.ap-offer-row::before{content:"";position:absolute;top:0;left:16px;right:16px;height:1px;background:#e0e0e0}
#app-prototype .ap-offer-row img{flex:none;width:72px;height:72px;border-radius:10px;object-fit:cover}
#app-prototype .ap-offer-row__t{flex:1;min-width:0;display:grid;gap:2px}
#app-prototype .ap-offer-row small{display:flex;justify-content:space-between;font-size:13px;color:var(--ap-muted)}
#app-prototype .ap-offer-row em{display:flex;align-items:center;gap:4px;font-style:normal}
#app-prototype .ap-offer-row.is-unread em{color:var(--ap-purple)}
#app-prototype .ap-offer-row.is-unread em::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ap-purple)}
#app-prototype .ap-offer-row b{font-size:16px;line-height:22px;font-weight:600}
#app-prototype .ap-offer-row.is-unread b{font-weight:600}
#app-prototype .ap-offer-row__t>span{font-size:14px;line-height:20px;color:var(--ap-dgrey);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ---- Onboarding (Figma 1.2–1.9) ---- */
#app-prototype .ap-ob{overflow:hidden}
#app-prototype .ap-view--photo{background:#000}
#app-prototype .ap-splash{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:100%;height:100%}
#app-prototype .ap-ob__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#app-prototype .ap-view--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.05) 53%,rgba(0,0,0,.75));pointer-events:none}
#app-prototype .ap-ob__logo{position:absolute;left:50%;top:62px;z-index:2;width:177px;height:auto;transform:translateX(-50%)}
#app-prototype .ap-ob__foot{position:absolute;left:16px;right:16px;bottom:34px;z-index:2;color:#fff}
#app-prototype .ap-ob__foot h3{font-size:24px;line-height:32px;font-weight:600}
#app-prototype .ap-ob__foot p{margin:8px 0 0;font-size:14px;line-height:20px}
#app-prototype .ap-ob__two{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-top:20px}
#app-prototype .ap-obbtn{width:100%;height:48px;border-radius:26px;background:var(--ap-purple);color:#fff;font-size:16px}
#app-prototype .ap-obbtn--ghost{border:1px solid #fff;background:transparent}
#app-prototype .ap-intro{position:absolute;inset:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
#app-prototype .ap-intro::-webkit-scrollbar{display:none}
#app-prototype .ap-intro__s{position:relative;flex:none;width:100%;height:100%;scroll-snap-align:start}
#app-prototype .ap-intro__s img{width:100%;height:100%;object-fit:cover}
#app-prototype .ap-intro__s::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.05) 53%,rgba(0,0,0,.75))}
#app-prototype .ap-intro__s h3{position:absolute;left:16px;right:16px;bottom:150px;z-index:1;color:#fff;text-align:center;font-size:24px;line-height:32px;font-weight:600}
#app-prototype .ap-view[data-view="intro"]::after{display:none}
#app-prototype .ap-ob__dots{display:flex;justify-content:center;gap:8px;margin-bottom:32px}
#app-prototype .ap-ob__dots i{width:8px;height:8px;border-radius:50%;background:#a8a8a8}
#app-prototype .ap-ob__dots i.on{background:#fff}
#app-prototype .ap-join__img{position:absolute;inset:0;overflow:hidden}
#app-prototype .ap-join__img img{position:absolute;left:-125px;top:60px;width:720px;height:720px;max-width:none}
#app-prototype .ap-join__foot{display:grid;gap:16px;text-align:center}
#app-prototype .ap-join__foot h3{font-size:32px;line-height:40px}
#app-prototype .ap-join__foot p{margin:-12px 0 8px}

/* sign up */
#app-prototype .ap-steps{flex:none;display:flex;gap:4px;background:#fff;margin-top:-1px}
#app-prototype .ap-steps i{flex:1;height:2px;border-radius:2px;background:#e0e0e0}
#app-prototype .ap-steps i.on{background:var(--ap-purple)}
#app-prototype .ap-su{display:grid;gap:16px;padding:16px}
#app-prototype .ap-su h3{font-size:24px;line-height:32px;font-weight:600}
#app-prototype .ap-su__sub{margin:-8px 0 0;font-size:16px;line-height:24px;color:var(--ap-muted)}
#app-prototype .ap-flf{position:relative;display:flex;align-items:center;gap:10px;height:52px;padding:0 16px;border:1px solid #e0e0e0;border-radius:8px;background:#fff}
#app-prototype .ap-flf:focus-within{box-shadow:inset 0 -1px 0 var(--ap-purple)}
#app-prototype .ap-flf.is-ok{box-shadow:inset 0 -1px 0 #27ae60}
#app-prototype .ap-flf__in{position:relative;flex:1;min-width:0;align-self:stretch;display:flex;align-items:flex-end}
#app-prototype .ap-flf__in input,#app-prototype .ap-flf__in select{width:100%;height:30px;padding:0 0 6px;border:0;outline:0;background:none;font:inherit;font-size:16px;color:var(--ap-ink);appearance:none;-webkit-appearance:none}
#app-prototype .ap-flf__l{position:absolute;left:0;top:14px;font-size:16px;color:var(--ap-muted);pointer-events:none;transition:top .15s,font-size .15s,color .15s}
#app-prototype .ap-flf__in input:focus+.ap-flf__l,#app-prototype .ap-flf__in input:not(:placeholder-shown)+.ap-flf__l,
#app-prototype .ap-flf.has-val .ap-flf__l,#app-prototype .ap-flf__in input[type="date"]+.ap-flf__l{top:6px;font-size:12px;color:var(--ap-purple)}
#app-prototype .ap-flf.is-ok .ap-flf__l{color:#27ae60}
#app-prototype .ap-flf--tel .ap-flf__in input{padding-left:46px}
#app-prototype .ap-flf--tel .ap-cc{position:absolute;left:0;bottom:6px;font-size:16px;color:rgba(0,0,0,.5)}
#app-prototype .ap-flf--tel>svg{width:20px;height:20px;margin-left:-6px}
#app-prototype .ap-flf--select>svg{pointer-events:none;width:22px;height:22px}
#app-prototype .ap-or{position:relative;display:grid;place-items:center;height:48px}
#app-prototype .ap-or::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:#e0e0e0}
#app-prototype .ap-or span{position:relative;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#fff;font-size:14px}
#app-prototype .ap-social-btn{display:flex;align-items:center;gap:30px;height:48px;padding:0 24px 0 50px;border:1px solid #e0e0e0;border-radius:26px;background:#fff;font-size:16px}
#app-prototype .ap-social-btn img{width:22px;height:22px;object-fit:contain}
#app-prototype .ap-su__foot{flex:none;margin:0;padding:12px 16px 34px;text-align:center;font-size:14px}
#app-prototype .ap-su__foot .ap-a,#app-prototype .ap-su__resend .ap-a{display:inline;margin:0;font-size:inherit}
#app-prototype .ap-su__resend{margin:0;font-size:14px}
#app-prototype .ap-otpboxes--su{grid-template-columns:repeat(4,1fr);gap:16px}
#app-prototype .ap-otpboxes--su input{height:64px;border-radius:8px}
#app-prototype .ap-otpboxes--su input::placeholder{color:#a8a8a8;font-weight:400}
#app-prototype .ap-su__req{margin:0;font-size:14px}
#app-prototype .ap-surules{display:grid;gap:12px;margin:0;padding:0;list-style:none;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-surules li{display:flex;align-items:center;gap:14px}
#app-prototype .ap-surules svg{display:none;width:18px;height:18px}
#app-prototype .ap-surules i{width:7px;height:7px;margin:0 5px;border-radius:50%;background:#777}
#app-prototype .ap-surules li.is-ok{color:#27ae60}
#app-prototype .ap-surules li.is-ok svg{display:block}
#app-prototype .ap-surules li.is-ok i{display:none}
#app-prototype .ap-su__help{margin:-8px 0 0 2px;font-size:12px;color:var(--ap-muted)}
#app-prototype .ap-su__help.is-bad{color:#b83737}
#app-prototype .ap-su__lbl{margin:0 0 -8px;font-size:16px;font-weight:600}
#app-prototype .ap-gender{display:flex;gap:16px}
#app-prototype .ap-gender button{position:relative;display:grid;place-items:center;width:104px;height:104px;border:1px solid #e0e0e0;border-radius:8px;background:#fff}
#app-prototype .ap-gender img{width:58px;height:58px}
#app-prototype .ap-gender i,#app-prototype .ap-brandtile i,#app-prototype .ap-puchips .ap-fchip i{position:absolute;right:8px;top:8px;width:22px;height:22px;border:1.5px solid #777;border-radius:50%;background:#fff}
#app-prototype .ap-gender [aria-checked="true"]{border-color:var(--ap-purple)}
#app-prototype .ap-gender [aria-checked="true"] i,#app-prototype .ap-brandtile[aria-pressed="true"] i{border-color:var(--ap-purple);background:var(--ap-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
#app-prototype .ap-su__terms{margin:0;font-size:12px;line-height:16px}
#app-prototype .ap-su__terms .ap-a{display:inline;margin:0;font-size:12px}
#app-prototype .ap-a--plain{text-decoration:none}
/* touch id sheet */
#app-prototype .ap-touch{position:absolute;inset:0;z-index:13;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,.55)}
#app-prototype .ap-touch[hidden]{display:none}
#app-prototype .ap-touch__in{display:grid;justify-items:center;gap:12px;padding:24px 16px 34px;border-radius:16px 16px 0 0;background:#fff;text-align:center}
#app-prototype .ap-touch__in h4{font-size:24px;line-height:32px;font-weight:600}
#app-prototype .ap-touch__in p{margin:0;font-size:14px;line-height:20px}
#app-prototype .ap-fp{position:relative;width:160px;height:160px;margin:12px 0 8px}
#app-prototype .ap-fp img{position:absolute;max-width:none}
#app-prototype .ap-fp__bg{left:11.49%;top:0;width:77.03%;height:100%}
#app-prototype .ap-fp__2{left:18.33%;top:7.8%;width:63.34%;height:84.4%}
#app-prototype .ap-fp__1{left:49.85%;top:60.11%;width:13.1%;height:31.4%}
#app-prototype .ap-fp__3{left:48.49%;top:41.38%;width:3.02%;height:10.56%}
#app-prototype .ap-fp.is-ok{filter:hue-rotate(-160deg) saturate(1.4)}
#app-prototype .ap-touch__msg{font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-touch__in .ap-btn{margin-top:20px}

/* ---- Complete your profile: Home card + Profile Update ---- */
#app-prototype .ap-cpcard{position:relative;display:flex;gap:16px;margin:16px 16px 0;padding:16px;border-radius:8px;background:#fff;box-shadow:0 0 2.5px rgba(0,0,0,.06),0 0 5px rgba(0,0,0,.1)}
#app-prototype .ap-cpcard[hidden]{display:none}
#app-prototype .ap-ring{--p:30;flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;
  background:radial-gradient(closest-side,#fff 82%,transparent 84%),conic-gradient(var(--ap-purple) calc(var(--p)*1%),#e0e0e0 0)}
#app-prototype .ap-ring b{font-size:14px;font-weight:600}
#app-prototype .ap-cpcard__t{flex:1;display:grid;justify-items:start}
#app-prototype .ap-cpcard__t h4{font-size:16px;line-height:24px;font-weight:600}
#app-prototype .ap-cpcard__t p{margin:0 0 16px;font-size:14px;line-height:20px}
#app-prototype .ap-cpcard__t .ap-cbtn{width:auto;height:32px;padding:0 16px}
#app-prototype .ap-cpx{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:40px;height:40px;color:var(--ap-purple)}
#app-prototype .ap-puchips{display:flex;flex-wrap:wrap;gap:12px}
#app-prototype .ap-puchips .ap-fchip{position:relative;height:40px;padding:0 44px 0 16px;border-color:#e0e0e0;background:#fff;font-size:16px;border-radius:20px}
#app-prototype .ap-puchips .ap-fchip i{top:8px;right:12px}
#app-prototype .ap-puchips .ap-fchip[hidden],#app-prototype .ap-brandtile[hidden]{display:none}
#app-prototype .ap-brandgrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
#app-prototype .ap-brandtile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:140px;border:1px solid transparent;border-radius:16px;background:#fff;
  font-size:16px;box-shadow:0 0 2.5px rgba(0,0,0,.06),0 0 5px rgba(0,0,0,.1)}
#app-prototype .ap-brandtile img{width:64px;height:64px;border-radius:16px;object-fit:cover}
#app-prototype .ap-brandtile[aria-pressed="true"]{border-color:var(--ap-purple)}
#app-prototype .ap-puchips .ap-fchip[aria-pressed="true"]{border-color:var(--ap-purple)}
#app-prototype .ap-puchips .ap-fchip[aria-pressed="true"] i{border-color:var(--ap-purple);background:var(--ap-purple) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
/* fixes: code boxes must fit the row; the bag photo must reach the bottom so the white Guest button reads */
#app-prototype .ap-otpboxes--su{grid-template-columns:repeat(4,minmax(0,1fr))}
#app-prototype .ap-otpboxes--su input{width:100%;min-width:0}
#app-prototype .ap-join__img img{left:-160px;top:44px;width:820px;height:820px}

/* ---- ANTUM Card (Figma: ANTUM Wallet / Add ANTUM Card) ---- */
#app-prototype .ap-tabbar{grid-template-columns:repeat(4,1fr)}
#app-prototype .ap-tabbar button{font-size:10.5px;letter-spacing:.2px}
#app-prototype .ap-acard{position:relative;width:290px;height:170px;margin:0 auto;border-radius:12px;background:#000;color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.25)}
#app-prototype .ap-acard--sm{width:160px;height:100px;border-radius:9px}
#app-prototype .ap-acard__logo{position:absolute;right:18px;top:16px;width:110px;height:auto}
#app-prototype .ap-acard--sm .ap-acard__logo{right:10px;top:9px;width:62px}
#app-prototype .ap-acard i{position:absolute;height:2px;background:#fff}
#app-prototype .ap-acard__l1{left:20px;top:44px;width:56px}#app-prototype .ap-acard__l2{left:118px;top:44px;width:20px}#app-prototype .ap-acard__l3{left:20px;top:56px;width:20px}
#app-prototype .ap-acard--sm .ap-acard__l1{left:20px;top:44px;width:56px}
#app-prototype .ap-acard__no{position:absolute;left:24px;right:20px;top:72px;margin:0;font-size:17px;letter-spacing:1.5px}
#app-prototype .ap-acard__exp{position:absolute;left:24px;bottom:22px;margin:0;font-size:12px}
#app-prototype .ap-visa{display:inline-block;font-family:Arial,Helvetica,sans-serif;font-size:15px;font-weight:900;font-style:italic;letter-spacing:.5px;color:#1a1f71}
#app-prototype .ap-visa--w{position:absolute;right:20px;bottom:18px;font-size:22px;color:#fff}
#app-prototype .ap-crow>.ap-visa{flex:none;width:40px;text-align:center}
#app-prototype .ap-mc{display:inline-block;width:28px;height:18px;background:radial-gradient(circle at 9px 9px,#eb001b 8.5px,transparent 9px),radial-gradient(circle at 19px 9px,#f79e1b 8.5px,transparent 9px)}
/* Apple Wallet badge (drawn in HTML) */
#app-prototype .ap-awallet{display:inline-flex;align-items:center;gap:8px;height:42px;margin:0 auto;padding:0 12px 0 8px;border-radius:7px;background:#000;color:#fff;text-align:left;font-size:15px;line-height:1.05;box-shadow:0 0 0 1px #a6a6a6}
#app-prototype .ap-awallet small{display:block;font-size:10px}
#app-prototype .ap-awallet__ic{position:relative;width:30px;height:24px;border-radius:4px;background:#d6d6d6;overflow:hidden}
#app-prototype .ap-awallet__ic i{position:absolute;left:3px;right:3px;height:5px;border-radius:2px}
#app-prototype .ap-awallet__ic i:nth-child(1){top:3px;background:#3b9be8}#app-prototype .ap-awallet__ic i:nth-child(2){top:7px;background:#f4b400}
#app-prototype .ap-awallet__ic i:nth-child(3){top:11px;background:#34a853}#app-prototype .ap-awallet__ic i:nth-child(4){top:15px;bottom:0;height:auto;background:#ea4335}
#app-prototype .ap-awallet[hidden]{display:none}
/* wallet */
#app-prototype .ap-view[data-view="wallet"]{position:absolute}
#app-prototype .ap-wcards{display:flex;gap:16px;padding:24px 42px 12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 42px;scrollbar-width:none}
#app-prototype .ap-wcards::-webkit-scrollbar{display:none}
#app-prototype .ap-wcard{flex:none;scroll-snap-align:start}
#app-prototype .ap-wcards:has(.ap-wcard:only-child){justify-content:center}
#app-prototype .ap-wbadge{display:flex;justify-content:center;margin-top:10px}
#app-prototype .ap-wadded{display:flex;align-items:center;gap:6px;margin:6px 0;color:#27ae60;font-size:14px;font-weight:600}
#app-prototype .ap-wadded svg{width:18px;height:18px}
#app-prototype .ap-wtitle{margin-top:24px;font-size:17px}
#app-prototype .ap-wrows{margin:0 16px}
#app-prototype .ap-wrow{display:flex;align-items:center;justify-content:space-between;height:56px;font-size:16px;border-top:1px solid #e0e0e0}
#app-prototype .ap-wrow .ap-link{font-size:16px}
#app-prototype .ap-switch{position:relative;width:50px;height:30px;border-radius:15px;background:#d6d6d6;transition:background-color .2s}
#app-prototype .ap-switch i{position:absolute;left:3px;top:3px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s}
#app-prototype .ap-switch[aria-checked="true"]{background:var(--ap-purple)}
#app-prototype .ap-switch[aria-checked="true"] i{transform:translateX(20px)}
#app-prototype .ap-wsheet{position:absolute;left:0;right:0;top:99px;bottom:86px;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;background:rgba(0,0,0,.35)}
#app-prototype .ap-wsheet[hidden]{display:none}
#app-prototype .ap-wsheet__in{display:grid;justify-items:center;gap:16px;max-height:100%;overflow-y:auto;scrollbar-width:none;padding:24px 24px 20px;border-radius:16px 16px 0 0;background:#fff;text-align:center}
#app-prototype .ap-wsheet__lead{margin:0;font-size:16px;line-height:24px}
#app-prototype .ap-wsheet__in h4{font-size:18px;line-height:26px;font-weight:600}
#app-prototype .ap-wsheet__in .ap-btn{margin-top:4px}
#app-prototype .ap-wsteps{display:grid;gap:22px;margin:0;padding:0;list-style:none;text-align:left;width:100%}
#app-prototype .ap-wsteps li{position:relative;display:flex;gap:20px}
#app-prototype .ap-wsteps li+li::before{content:"";position:absolute;left:23px;top:-24px;height:24px;border-left:2px dashed #d6d6d6}
#app-prototype .ap-wsteps span{flex:none;display:grid;place-items:center;width:48px;height:48px;border:2px solid #e0e0e0;border-radius:50%;font-size:18px;font-weight:600}
#app-prototype .ap-wsteps .is-done span{border-color:var(--ap-purple);background:var(--ap-purple);color:#fff}
#app-prototype .ap-wsteps span svg{width:24px;height:24px}
#app-prototype .ap-wsteps b{font-size:17px;font-weight:600}
#app-prototype .ap-wsteps p{margin:2px 0 0;font-size:14px;line-height:20px;color:var(--ap-dgrey)}
/* add card form */
#app-prototype .ap-cc2{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center}
#app-prototype .ap-cvvhelp{justify-self:start;margin:0;font-size:14px}
#app-prototype .ap-flf--cc>svg{width:24px;height:24px;flex:none}
#app-prototype .ap-ccbrand{display:none;align-self:flex-end;padding-bottom:7px}
#app-prototype .ap-flf--cc.has-brand .ap-ccbrand{display:block}
#app-prototype .ap-flf--cc.has-brand .ap-flf__l{left:0}
#app-prototype .ap-spin{width:28px;height:28px;margin-top:16px;border:3px solid #F6C9D9;border-top-color:var(--ap-purple);border-radius:50%;animation:ap-spin 1s linear infinite}
@keyframes ap-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#app-prototype .ap-spin{animation:none}}
#app-prototype .ap-acready{display:grid;justify-items:center;gap:28px;padding:80px 16px 24px}
#app-prototype .ap-acstep{display:flex;gap:16px;align-items:flex-start;width:100%;text-align:left}
#app-prototype .ap-acstep__ic{flex:none;display:grid;place-items:center;width:56px;height:56px;border:1.5px solid var(--ap-purple);border-radius:50%}
#app-prototype .ap-acstep h5{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:600;color:var(--ap-purple)}
#app-prototype .ap-acstep h5 i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--ap-purple);color:#fff}
#app-prototype .ap-acstep h5 i svg{width:16px;height:16px}
#app-prototype .ap-acstep p{margin:4px 0 0;font-size:15px;line-height:22px;color:var(--ap-dgrey)}
#app-prototype .ap-applepay{display:flex;align-items:center;gap:1px;font-family:-apple-system,Helvetica,Arial,sans-serif;font-size:18px;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-applepay img{width:15px;height:18px}
#app-prototype .ap-applepay--box{height:58px;padding:0 14px;border:2px solid #000;border-radius:8px;font-size:30px}
#app-prototype .ap-applepay--box img{width:24px;height:29px}
#app-prototype .ap-allset{display:flex;align-items:center;justify-content:center;gap:56px;height:180px}
#app-prototype .ap-contactless svg{width:100px;height:60px}
#app-prototype .ap-muted2{color:var(--ap-muted)}
/* Apple system sheets */
#app-prototype .ap-ios{font-family:-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif}
#app-prototype .ap-ios__bar{flex:none;display:flex;justify-content:space-between;padding:58px 20px 0}
#app-prototype .ap-ios__bar button{color:#007aff;font-size:19px}
#app-prototype .ap-ios__bar button:last-child{font-weight:600}
#app-prototype .ap-ios__t{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px;text-align:center;font-size:21px;line-height:26px;font-weight:600}
#app-prototype .ap-ios__t--top{margin-top:90px}
#app-prototype .ap-ios__tick svg{width:36px;height:36px;color:#007aff}
#app-prototype .ap-ios__s{margin:24px 0 18px;text-align:center;font-size:15px;color:var(--ap-muted)}
#app-prototype .ap-ios__rows{display:grid;grid-template-columns:136px 1fr;margin:40px 0 0;border-top:1px solid #d6d6d6}
#app-prototype .ap-ios__s+.ap-ios__rows{margin-top:0}
#app-prototype .ap-ios__rows dt,#app-prototype .ap-ios__rows dd{margin:0;padding:15px 0 15px 10px;border-bottom:1px solid #d6d6d6;font-size:15px}
#app-prototype .ap-ios__rows dd{padding-left:0;color:var(--ap-muted)}
#app-prototype .ap-ios__terms{margin:50px 14px 0;font-size:15px;line-height:24px;color:var(--ap-muted)}
#app-prototype .ap-ios__foot{flex:none;display:flex;justify-content:space-between;padding:24px 16px 40px;background:#f4f4f4;border-top:1px solid #d6d6d6}
#app-prototype .ap-ios__foot button{color:#007aff;font-size:19px;font-weight:600}
#app-prototype .ap-ios__people{display:grid;justify-items:center;gap:10px;margin-top:200px;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-warn{width:140px;height:124px}
#app-prototype .ap-mc--card{position:absolute;right:20px;bottom:16px;transform:scale(1.4);transform-origin:right bottom}
#app-prototype .ap-acstep__ic.ap-applepay{font-size:14px;gap:0}
#app-prototype .ap-acstep__ic.ap-applepay img{width:11px;height:14px}
#app-prototype .ap-cards--card .ap-crow,#app-prototype .ap-crow--card{gap:12px}
#app-prototype .ap-cards--card .ap-crow__t b,#app-prototype .ap-crow--card .ap-crow__t b{font-size:15px;letter-spacing:-.2px;overflow:visible}
#app-prototype .ap-cards--card .ap-crow__r,#app-prototype .ap-crow--card .ap-crow__r{font-size:13px}
#app-prototype .ap-acstep__ic.ap-applepay{justify-content:center}
/* Our Partners: A–Z directory, chips scroll sideways; the partner page reuses the detail + calculator rows */
#app-prototype .ap-pcats{display:flex;align-items:center;gap:8px;padding:0 16px 16px;overflow-x:auto;scrollbar-width:none}
#app-prototype .ap-pcats::-webkit-scrollbar{display:none}
#app-prototype .ap-pcats .ap-ichip{flex:none;height:36px;padding:0 14px;font-size:14px}
#app-prototype .ap-pcats .ap-ichip svg{width:16px;height:16px}
#app-prototype .ap-pcats__sep{flex:none;width:1px;height:24px;background:#d6d6d6}
#app-prototype .ap-cards--partners{margin-top:0}
#app-prototype .ap-cards--partners .ap-crow{min-height:68px;gap:14px}
#app-prototype .ap-cards--partners .ap-crow>svg:last-child{flex:none;width:20px;height:20px;color:#9a9a9a}
#app-prototype .ap-thumb--logo{border:1px solid #ececec}
#app-prototype .ap-crow__t mark{background:none;color:var(--ap-purple)}
#app-prototype .ap-paytag{flex:none;display:flex;align-items:center;gap:4px;height:24px;padding:0 9px;border-radius:12px;background:#FCE9F0;color:var(--ap-purple);font-size:12px;font-weight:600}
#app-prototype .ap-paytag svg{width:14px;height:14px}
#app-prototype .ap-pstats{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;margin:16px 0}
#app-prototype .ap-pstats>div{display:grid;justify-items:start;align-content:start;gap:2px;padding:12px;border-radius:12px;background:#FCE9F0}
#app-prototype .ap-pstats>div.is-off{background:#f2f2f2}
#app-prototype .ap-pstats svg{width:22px;height:22px;margin-bottom:4px;color:var(--ap-purple)}
#app-prototype .ap-pstats .is-off svg{color:var(--ap-muted)}
#app-prototype .ap-pstats b{font-size:17px;line-height:24px;font-weight:600}
#app-prototype .ap-pstats small{font-size:13px;line-height:18px;color:var(--ap-dgrey)}
#app-prototype .ap-pabout{font-size:15px;line-height:22px}
#app-prototype .ap-cres--p{margin-top:8px}
#app-prototype [data-view="partner"] .ap-formcta .ap-btn svg{width:20px;height:20px}
/* Pay with Points */
#app-prototype .ap-ppamt{display:grid;justify-items:center;gap:8px;padding:18px 16px 20px;border-radius:16px;background:#fff;text-align:center;transition:box-shadow .15s}
#app-prototype .ap-ppamt:focus-within{box-shadow:0 0 0 2px var(--ap-purple)}
#app-prototype .ap-ppamt.is-err{box-shadow:0 0 0 2px #b83737}
#app-prototype .ap-ppamt__in{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;column-gap:6px;cursor:text}
#app-prototype .ap-ppamt__l{flex-basis:100%;margin-bottom:4px;font-size:14px;color:var(--ap-muted)}
#app-prototype .ap-ppamt__in input{min-width:2ch;max-width:220px;height:52px;padding:0;border:0;outline:0;background:none;font:inherit;font-size:44px;font-weight:600;text-align:right;color:var(--ap-ink)}
#app-prototype .ap-ppamt__in input:focus-visible{outline:none}
#app-prototype .ap-ppamt__in input::placeholder{color:#c4c4c4}
#app-prototype .ap-ppamt__u{font-size:20px;font-weight:600;color:var(--ap-muted)}
#app-prototype .ap-ppamt__pts{display:flex;align-items:center;gap:6px;margin:0;font-size:15px;font-weight:600;color:var(--ap-purple)}
#app-prototype .ap-ppamt__pts svg{width:18px;height:18px}
#app-prototype .ap-ppquick{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;justify-self:stretch;margin-top:4px}
#app-prototype .ap-ppquick .ap-pchip{height:34px;padding:0 12px;font-size:14px}
#app-prototype .ap-ppamt .ap-ferr{margin:0}
#app-prototype .ap-ppsum{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0;padding:16px;border-radius:16px;background:#fff;font-size:15px}
#app-prototype .ap-ppsum dt{color:var(--ap-muted)}
#app-prototype .ap-ppsum dd{margin:0;font-weight:600;text-align:right}
#app-prototype .ap-ppnote{display:flex;gap:8px;margin:0;font-size:13px;line-height:18px;color:var(--ap-muted)}
#app-prototype .ap-ppnote svg{flex:none;width:18px;height:18px}
#app-prototype .ap-paycode{display:grid;justify-items:center;gap:12px;padding:16px 16px 20px;border-radius:16px;background:#fff;text-align:center}
#app-prototype .ap-paycode__who{display:flex;align-items:center;gap:12px;justify-self:stretch;padding-bottom:12px;border-bottom:1px solid #eee;text-align:left}
#app-prototype .ap-paycode__who span{display:grid}
#app-prototype .ap-paycode__who b{font-size:16px;font-weight:600}
#app-prototype .ap-paycode__who small{font-size:13px;color:var(--ap-muted)}
#app-prototype .ap-paycode__amt{display:grid;margin:0}
#app-prototype .ap-paycode__amt b{font-size:32px;line-height:40px;font-weight:600}
#app-prototype .ap-paycode__amt span{font-size:15px;font-weight:600;color:var(--ap-purple)}
#app-prototype .ap-paycode__qr .ap-qrcode{width:190px;height:190px}
#app-prototype .ap-paycode__no{margin:0;font-size:18px;font-weight:600;letter-spacing:2px}
#app-prototype .ap-paycode__timer{display:grid;gap:6px;justify-self:stretch}
#app-prototype .ap-paycode__timer .ap-progress{height:6px;margin:0}
#app-prototype .ap-paycode__timer .ap-progress>span{transition:width 1s linear}
#app-prototype .ap-paycode__timer small{font-size:13px;color:var(--ap-muted)}
#app-prototype .ap-paycode__wait{display:flex;align-items:center;justify-content:center;gap:10px;margin:16px 0 6px;font-size:15px}
#app-prototype .ap-paycode__wait .ap-spin{width:20px;height:20px;margin:0}
@media (prefers-reduced-motion:reduce){#app-prototype .ap-paycode__timer .ap-progress>span{transition:none}}
/* Settings (Figma 13.1): white list cards with 48px rows, 14px text, the design's toggle and radio art */
#app-prototype .ap-sblock{padding:16px 16px 8px}
#app-prototype .ap-sblock--top{padding-top:0}
#app-prototype .ap-shd{display:grid;gap:4px;margin-bottom:8px;text-align:start}
#app-prototype .ap-shd h5{font-size:16px;line-height:24px;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-shd p{margin:0;font-size:14px;line-height:20px;color:var(--ap-muted)}
#app-prototype .ap-slist{display:flex;flex-direction:column;padding:0 16px;border:1px solid #e0e0e0;border-radius:8px;background:#fff;box-shadow:0 0 2.5px rgba(0,0,0,.06),0 0 5px rgba(0,0,0,.1)}
#app-prototype .ap-slist[hidden],#app-prototype .ap-faq__i[hidden]{display:none}
#app-prototype .ap-srow2{display:flex;align-items:center;gap:8px;width:100%;min-height:48px;padding:12px 0;font-size:14px;line-height:20px;color:var(--ap-ink);text-align:start}
#app-prototype .ap-srow2+.ap-srow2,#app-prototype .ap-srow2+.ap-snote,#app-prototype .ap-faq__i+.ap-faq__i{border-top:1px solid #e0e0e0}
#app-prototype .ap-srow2>span{flex:1;min-width:0}
#app-prototype .ap-srow2>svg:last-child{flex:none;width:24px;height:24px;color:var(--ap-ink)}
#app-prototype .ap-slink{margin:0;font-size:14px;line-height:20px;text-decoration:none}
#app-prototype .ap-snote{margin:0;padding:12px 0;font-size:12px;line-height:16px;color:var(--ap-muted)}
#app-prototype .ap-tog{position:relative;flex:none;width:46px;height:23px;border:1px solid var(--ap-purple);border-radius:24px;background:#fff;transition:background-color .2s}
#app-prototype .ap-tog i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:var(--ap-purple);transition:transform .2s,background-color .2s}
#app-prototype .ap-tog[aria-checked="true"]{background:var(--ap-purple)}
#app-prototype .ap-tog[aria-checked="true"] i{transform:translateX(23px);background:#fff}
#app-prototype [dir="rtl"] .ap-tog[aria-checked="true"] i{transform:translateX(-23px)}
#app-prototype .ap-srow2--radio img{flex:none}
#app-prototype .ap-srow2--radio .ap-r1,#app-prototype .ap-srow2--radio[aria-checked="true"] .ap-r0{display:none}
#app-prototype .ap-srow2--radio[aria-checked="true"] .ap-r1{display:block}
#app-prototype [lang="ar"]{font-family:"Almarai","Geeza Pro","Noto Sans Arabic",Tahoma,sans-serif}
#app-prototype [dir="rtl"] .ap-nav [data-back] svg{transform:scaleX(-1)}
#app-prototype .ap-illus--ask .ap-illus__body{justify-content:flex-start;padding-top:0}
#app-prototype .ap-illus--ask .ap-illus__art img{width:264px;height:203px}
#app-prototype .ap-menu--out{margin-top:24px}
#app-prototype .ap-menu img{flex:none;width:26px;height:26px}
/* Support: FAQ answers open in place; contact rows carry an icon and a detail line */
#app-prototype .ap-faq .ap-acc__head{gap:12px;height:auto;min-height:48px;padding:12px 0;font-size:14px;line-height:20px;font-weight:400;text-align:start}
#app-prototype .ap-faq .ap-acc__head svg{flex:none;width:20px;height:20px;color:var(--ap-dgrey)}
#app-prototype .ap-faq .ap-acc__body{display:block;margin:0;padding:0 0 14px;font-size:14px;line-height:20px;color:var(--ap-dgrey)}
#app-prototype .ap-faq .ap-acc__body[hidden]{display:none}
#app-prototype .ap-srow2--ic>svg:first-child{flex:none;width:24px;height:24px;color:var(--ap-purple)}
#app-prototype .ap-srow2--ic>span{display:grid}
#app-prototype .ap-srow2--ic b{font-weight:600}
#app-prototype .ap-srow2--ic small{font-size:12px;line-height:16px;color:var(--ap-muted)}
/* ==== Cenomi Rewards rebrand (Figma iOS_App_store_6.5_EN 1-6) ====
   Fuchsia #DB2E6D, Aubergine #20113E, greys #F5F5F7 / #A7A9B4 / #63666F / #46484F.
   The brand font (Neo Sans Arabic for Cenomi) is licensed, so Titillium Web stands in:
   it is what cenomi.com itself uses, and its squared curves read close to Neo Sans.
   Cards are square-cornered with soft shadows; buttons stay pills. */
#app-prototype .ap-screen,#app-prototype .ap-view{background:var(--ap-bg)}
#app-prototype .ap-view--white{background:#fff}
#app-prototype .ap-card,#app-prototype .ap-cards,#app-prototype .ap-rows,#app-prototype .ap-menu,#app-prototype .ap-slist,#app-prototype .ap-profile,
#app-prototype .ap-partner,#app-prototype .ap-calc,#app-prototype .ap-ptcard,#app-prototype .ap-ptcard__top,#app-prototype .ap-ppamt,#app-prototype .ap-ppsum,
#app-prototype .ap-paycode,#app-prototype .ap-cpcard,#app-prototype .ap-task,#app-prototype .ap-txcard,#app-prototype .ap-mqr,#app-prototype .ap-tier,
#app-prototype .ap-field,#app-prototype .ap-flf,#app-prototype .ap-tf,#app-prototype .ap-cfield,#app-prototype .ap-vcard,#app-prototype .ap-pstats>div{border-radius:2px}
#app-prototype .ap-card,#app-prototype .ap-cards,#app-prototype .ap-rows,#app-prototype .ap-menu,#app-prototype .ap-slist,#app-prototype .ap-profile,
#app-prototype .ap-cpcard,#app-prototype .ap-task,#app-prototype .ap-calc,#app-prototype .ap-txcard{box-shadow:0 2px 4px rgba(0,0,0,.06),0 4px 4px rgba(0,0,0,.04)}
#app-prototype .ap-slist{border-color:transparent}
#app-prototype .ap-btn,#app-prototype .ap-redeem{font-weight:600}
#app-prototype .ap-link{font-weight:600}
#app-prototype .ap-spin{border-color:#F6C9D9;border-top-color:var(--ap-purple)}

/* top navigation: back chevron + left-aligned title, as in "< Sign up" / "< More" */
#app-prototype .ap-nav{grid-template-columns:auto 1fr auto;padding:47px 8px 0 2px;box-shadow:inset 0 -1px 0 #E3E4E8}
#app-prototype .ap-nav>[data-back]{grid-column:1}
#app-prototype .ap-nav>h4{grid-column:2;text-align:left;font-size:18px;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-nav>:last-child:not(h4){grid-column:3}
#app-prototype .ap-nav>span:first-child+h4,#app-prototype .ap-nav.is-root>h4{padding-left:14px}
#app-prototype .ap-nav>span:first-child{display:none}
#app-prototype .ap-nav [data-back] svg{width:26px;height:26px}

/* Home top bar: menu, Cenomi Rewards logo, inbox */
#app-prototype .ap-hbar{position:relative;z-index:3;flex:none;display:grid;grid-template-columns:52px 1fr 52px;align-items:center;justify-items:center;height:109px;padding:47px 4px 0;
  background:rgba(255,255,255,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 -1px 0 #E3E4E8;color:var(--ap-ink)}
#app-prototype .ap-hbar .ap-iconbtn svg{width:26px;height:26px}
#app-prototype .ap-crlogo{display:inline-grid;justify-items:start;line-height:1}
#app-prototype .ap-crlogo img{display:block;width:146px;height:auto}
#app-prototype .ap-crlogo b{margin:6px 0 0 1px;font-size:20px;font-weight:400;letter-spacing:.2px}
#app-prototype .ap-crlogo--white{color:#fff}
#app-prototype .ap-crlogo--ink{color:var(--ap-ink)}
#app-prototype .ap-crlogo--sm{justify-items:center}
#app-prototype .ap-crlogo--sm img{width:82px}
#app-prototype .ap-crlogo--sm b{margin-top:3px;font-size:12px}
#app-prototype .ap-crlogo--xl img{width:236px}
#app-prototype .ap-crlogo--xl b{margin-top:10px;font-size:30px}

/* tab bar: Home, Our Malls, Our Brands, Me */
#app-prototype .ap-tabbar{grid-template-columns:repeat(4,1fr);height:84px;padding-bottom:30px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid #E3E4E8}
#app-prototype .ap-tabbar button{gap:5px;font-size:11px;font-weight:600;letter-spacing:.2px;color:var(--ap-ink)}
#app-prototype .ap-tabbar button svg{width:24px;height:24px}
#app-prototype .ap-tabbar button.is-active{color:var(--ap-purple)}
#app-prototype .ap-tabbar button.is-active::before{display:none}

/* Home: profile card from the design (avatar + QR badge, member meta, points, two actions) */
#app-prototype .ap-view[data-view="home"] .ap-scroll{padding-bottom:16px}
#app-prototype .ap-profile{margin:20px 16px 0;padding-top:24px;background:#fff}
#app-prototype .ap-avatar{width:88px;height:88px}
#app-prototype .ap-avatar img{width:88px;height:88px;border:1px solid #A7A9B4;border-radius:50%;background:#F5F5F7;object-fit:cover}
#app-prototype .ap-profile .ap-qr{right:-8px;bottom:0;width:34px;height:34px;padding:0;border:1px solid #A7A9B4;border-radius:50%;background:#fff;color:var(--ap-ink);box-shadow:none}
#app-prototype .ap-profile .ap-qr svg{width:22px;height:22px}
#app-prototype .ap-profile .ap-qr::after{inset:-8px}
#app-prototype .ap-name{margin:12px 0 16px;font-size:28px;line-height:36px;font-weight:400;color:var(--ap-ink)}
#app-prototype .ap-member{margin:0 16px}
#app-prototype .ap-member div+div{border-left-color:#A7A9B4}
#app-prototype .ap-member dt{font-size:13px;line-height:18px;color:var(--ap-dgrey)}
#app-prototype .ap-member dd{margin-top:2px;font-size:15px;line-height:20px;font-weight:600;letter-spacing:.6px;color:var(--ap-dgrey)}
#app-prototype .ap-have{margin-top:30px;gap:10px;font-weight:600;color:#A7A9B4}
#app-prototype .ap-profile>.ap-progress{height:8px;margin:10px 16px 0;background:#EDEDF0}
#app-prototype .ap-profile>.ap-progress>span{width:52%;border-radius:8px;background:var(--ap-purple)}
#app-prototype .ap-need{margin:10px 0 32px;font-size:15px;color:var(--ap-dgrey)}
#app-prototype .ap-acts2{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid #E3E4E8}
#app-prototype .ap-acts2 button{height:44px;font-size:16px;color:var(--ap-purple)}
#app-prototype .ap-acts2 button+button{background:var(--ap-purple);color:#fff}
#app-prototype .ap-sechead{padding:30px 16px 14px}
#app-prototype .ap-sechead h4{font-size:22px;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-sechead h4 span{font-size:18px;font-weight:400}
#app-prototype .ap-sechead .ap-link{font-size:16px}
#app-prototype .ap-row--malls .ap-card{width:293px;--k:.85423}
#app-prototype .ap-earn{display:grid;gap:12px;padding:0 16px 8px}
#app-prototype .ap-earn .ap-calcpromo{margin:0}

/* card overlays keep their old geometry (the photos have the old tag baked in underneath) */
#app-prototype .ap-label{background:var(--ap-purple);font-weight:600}
#app-prototype .ap-chip{background:#fff;color:var(--ap-purple);box-shadow:0 0 0 1px #fff}
#app-prototype .ap-chip.is-on{background:var(--ap-purple);color:#fff}

/* splash, language, guest Home */
#app-prototype .ap-ob--pink{background:var(--ap-purple)}
#app-prototype .ap-splash{align-items:center;justify-content:center}
#app-prototype .ap-crbg{background:linear-gradient(165deg,#EE9CCB 0%,#DB2E6D 36%,#A11E5E 66%,#4A0E44 100%)}
#app-prototype .ap-crsq{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#app-prototype .ap-crsq i{position:absolute;left:50%;top:36%;border-radius:4px;transform:translate(-50%,-50%) rotate(var(--r));
  background:linear-gradient(165deg,rgba(247,210,255,.9) 0%,rgba(236,120,190,.45) 30%,rgba(219,46,109,.05) 55%,rgba(74,14,68,.35) 100%)}
#app-prototype .ap-crsq i:nth-child(1){width:1040px;height:1040px;--r:22deg;top:44%;opacity:.55}
#app-prototype .ap-crsq i:nth-child(2){width:760px;height:760px;--r:16deg;opacity:.65}
#app-prototype .ap-crsq i:nth-child(3){width:520px;height:520px;--r:10deg;opacity:.8}
#app-prototype .ap-crsq i:nth-child(4){width:300px;height:300px;--r:12deg}
#app-prototype .ap-lang__mark{position:absolute;left:50%;top:218px;z-index:2;display:grid;place-items:center;width:194px;height:194px;border:6px solid #fff;transform:translateX(-50%)}
#app-prototype .ap-lang__mark .ap-crlogo img{width:146px}
#app-prototype .ap-ob__foot{text-align:center}
#app-prototype .ap-ob__foot h3{font-size:28px;line-height:36px;font-weight:400}
#app-prototype .ap-ob__foot p{margin-top:6px;font-size:16px;line-height:24px}
#app-prototype .ap-ob__two{gap:16px;margin:40px 24px 0}
#app-prototype .ap-obbtn{height:48px;border-radius:24px;background:#fff;color:var(--ap-ink);font-size:17px;font-weight:600}
#app-prototype .ap-guest{color:#fff}
#app-prototype .ap-guest .ap-hbar{background:rgba(255,255,255,.88)}
#app-prototype .ap-guest__body{position:relative;z-index:1;flex:1;min-height:0;display:flex;flex-direction:column}
#app-prototype .ap-guest .ap-intro{position:relative;inset:auto;flex:1;min-height:0}
#app-prototype .ap-guest .ap-intro__s{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 24px;text-align:center}
#app-prototype .ap-guest .ap-intro__s::after{display:none}
#app-prototype .ap-intro__ph{display:block;width:212px;height:212px;margin-bottom:28px;border:6px solid #fff;box-shadow:0 10px 30px rgba(32,17,62,.25)}
#app-prototype .ap-guest .ap-intro__s img{width:100%;height:100%;object-fit:cover}
#app-prototype .ap-guest .ap-intro__s h3{position:static;font-size:28px;line-height:36px;font-weight:400}
#app-prototype .ap-guest .ap-intro__s p{margin:0;font-size:17px;line-height:24px;max-width:300px}
#app-prototype .ap-guest .ap-ob__dots{margin:4px 0 26px}
#app-prototype .ap-ob__dots i{width:7px;height:7px;border-radius:1px;background:rgba(255,255,255,.45)}
#app-prototype .ap-ob__dots i.on{background:#fff}
#app-prototype .ap-guest__cta{padding:0 16px 18px;text-align:center}
#app-prototype .ap-guest__cta .ap-obbtn{color:var(--ap-purple)}
#app-prototype .ap-guest__cta p{margin:16px 0 0;font-size:16px}
#app-prototype .ap-guest__cta p button{font-weight:600}

/* sign up */
#app-prototype .ap-su{padding:28px 32px 16px;gap:24px}
#app-prototype .ap-su h3{font-size:26px;line-height:34px;font-weight:400;color:var(--ap-ink)}
#app-prototype .ap-flf{border-color:#D5D6DC}
#app-prototype .ap-or::before{display:none}
#app-prototype .ap-or span{background:#fff;color:var(--ap-ink);font-size:15px}
#app-prototype .ap-social-btn{justify-content:center;gap:12px;padding:0 24px;border:0;font-weight:600;color:var(--ap-ink)}
#app-prototype .ap-su__foot .ap-a{color:var(--ap-purple)}

/* More (hamburger): grouped cards from the design */
#app-prototype .ap-more{padding:8px 16px 24px}
#app-prototype .ap-more__h{display:flex;align-items:center;gap:8px;margin:24px 0 12px;font-size:15px;font-weight:400;color:var(--ap-ink)}
#app-prototype .ap-more__h svg{width:22px;height:22px}
#app-prototype .ap-more__card{display:flex;flex-direction:column;padding:0 16px;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.06),0 4px 4px rgba(0,0,0,.04)}
#app-prototype .ap-more__card button{display:flex;align-items:center;gap:12px;height:57px;font-size:17px;font-weight:600;color:var(--ap-ink);text-align:left}
#app-prototype .ap-more__card button+button{border-top:1px solid #E3E4E8}
#app-prototype .ap-more__card button>span{flex:1}
#app-prototype .ap-more__card button>svg:last-child{width:20px;height:20px;color:var(--ap-purple)}
#app-prototype .ap-more__card em{font-style:normal;font-weight:700;color:var(--ap-purple)}
#app-prototype .ap-more__out{display:block;margin:22px auto 0;padding:6px 12px;font-size:16px;font-weight:600;color:var(--ap-purple)}
#app-prototype .ap-more__out[hidden]{display:none}
#app-prototype .ap-more__ver{margin:14px 0 0;text-align:center;font-size:13px;color:var(--ap-ink)}

/* Cenomi Card + membership card */
#app-prototype .ap-acard{background:linear-gradient(135deg,#DB2E6D 0%,#8C1C5B 52%,#20113E 100%)}
#app-prototype .ap-acard__logo{width:92px;height:auto}
#app-prototype .ap-mcard .ap-crlogo{justify-items:start}
#app-prototype .ap-earn .ap-calcpromo{width:100%;border-radius:2px}
#app-prototype .ap-mthumb{background:var(--ap-ink)}
#app-prototype .ap-ob--pink::after,#app-prototype .ap-crbg::after{display:none}
#app-prototype .ap-view[data-view="home"] .ap-scroll{padding-top:0}
#app-prototype .ap-hbar .ap-inbox{position:relative;right:auto;top:auto}
#app-prototype .ap-sechead{grid-template-columns:1fr auto;align-items:center;row-gap:2px}
#app-prototype .ap-sechead h4{grid-column:1;grid-row:1}
#app-prototype .ap-sechead .ap-link{grid-column:2;grid-row:1}
#app-prototype .ap-sechead p{grid-column:1/-1;grid-row:2}
#app-prototype .ap-chip{box-shadow:0 0 0 3px #fff}
#app-prototype .ap-chip.is-on{box-shadow:0 0 0 3px var(--ap-purple)}
#app-prototype .ap-rows .ap-switch{flex:none;height:30px;border-top:0}
/* splash + language motion (app-prototype.js, "Splash > language") */
#app-prototype .ap-splash{position:relative}
#app-prototype .ap-splogo{position:relative;display:block;width:236px;height:95px}
#app-prototype .ap-crlogo--xl .ap-splogo img{position:absolute;inset:0;width:100%;height:100%}
#app-prototype .ap-crlogo--xl b{margin-top:10px;font-size:32px}
#app-prototype .ap-splash__glow{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.45) 0%,rgba(255,255,255,.12) 38%,rgba(255,255,255,0) 66%)}
#app-prototype .ap-lang__mark{border:0}
#app-prototype .ap-lang__frame{position:absolute;inset:0;border:6px solid #fff}
#app-prototype .ap-su .ap-guestbtn{height:48px;border:1px solid var(--ap-ink);border-radius:24px;background:transparent;color:var(--ap-ink);font-size:16px;font-weight:600}
/* Upload receipt: camera-style scan, check, My Receipts, receipt detail */
#app-prototype .ap-rcpaper{width:220px;padding:18px 16px 22px;background:#fff;color:#2a2a2a;font:12px/1.45 "SF Mono",Menlo,Consolas,monospace;text-align:center;
  -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
  mask:linear-gradient(#000,#000) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x}
#app-prototype .ap-rcpaper p{margin:6px 0 0;font-size:10px;color:#666}
#app-prototype .ap-rcpaper__brand{display:inline-block;padding:3px 8px;background:#111;color:#fff;font:700 14px/1.2 "Titillium Web",sans-serif;letter-spacing:1px}
#app-prototype .ap-rcpaper__meta,#app-prototype .ap-rcpaper__total,#app-prototype .ap-rcpaper li{display:flex;justify-content:space-between;gap:8px}
#app-prototype .ap-rcpaper ul{margin:10px 0 0;padding:8px 0;border-block:1px dashed #bbb;list-style:none;text-align:left}
#app-prototype .ap-rcpaper li+li{margin-top:3px}
#app-prototype .ap-rcpaper .ap-rcpaper__total{margin-top:8px;font-size:13px;font-weight:700;color:#111}
#app-prototype .ap-rcpaper__code{display:block;height:30px;margin:12px 6px 0;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 3px,#111 3px 4px,#fff 4px 7px,#111 7px 10px,#fff 10px 11px)}
#app-prototype .ap-rcscan .ap-cropbar{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;padding:47px 4px 0;height:99px}
#app-prototype .ap-rcscan .ap-cropbar h4{text-align:center;font-size:17px;font-weight:600}
#app-prototype .ap-rcscan .ap-cropbar [aria-pressed="true"]{color:#FFD24A}
#app-prototype .ap-rcview{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#5b4a42,#2a211d 70%)}
#app-prototype .ap-rcview__doc{transform:perspective(700px) rotateX(9deg) rotate(-3deg) scale(1.02);filter:drop-shadow(0 18px 24px rgba(0,0,0,.45)) brightness(.97)}
#app-prototype .ap-rcguide{position:absolute;left:50%;top:50%;width:270px;height:470px;transform:translate(-50%,-50%);transition:width .35s cubic-bezier(.22,1,.36,1),height .35s cubic-bezier(.22,1,.36,1)}
#app-prototype .ap-rcguide i{position:absolute;width:34px;height:34px;border:0 solid #fff;transition:border-color .3s}
#app-prototype .ap-rcguide i:nth-child(1){left:0;top:0;border-width:4px 0 0 4px;border-radius:10px 0 0 0}
#app-prototype .ap-rcguide i:nth-child(2){right:0;top:0;border-width:4px 4px 0 0;border-radius:0 10px 0 0}
#app-prototype .ap-rcguide i:nth-child(3){left:0;bottom:0;border-width:0 0 4px 4px;border-radius:0 0 0 10px}
#app-prototype .ap-rcguide i:nth-child(4){right:0;bottom:0;border-width:0 4px 4px 0;border-radius:0 0 10px 0}
#app-prototype .ap-rcscan.is-found .ap-rcguide{width:250px;height:430px}
#app-prototype .ap-rcscan.is-found .ap-rcguide i{border-color:var(--ap-purple)}
#app-prototype .ap-rchint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);margin:0;padding:8px 14px;border-radius:18px;background:rgba(0,0,0,.6);font-size:14px;white-space:nowrap;color:#fff}
#app-prototype .ap-rcscan.is-found .ap-rchint{background:var(--ap-purple)}
#app-prototype .ap-rcflash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none}
#app-prototype .ap-rcbar{flex:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;justify-items:center;height:150px;padding-bottom:28px;background:#000}
#app-prototype .ap-rcside{display:grid;justify-items:center;gap:4px;font-size:12px;color:#fff}
#app-prototype .ap-rcside svg{width:26px;height:26px}
#app-prototype .ap-shutter{display:grid;place-items:center;width:76px;height:76px;border:4px solid #fff;border-radius:50%}
#app-prototype .ap-shutter i{width:60px;height:60px;border-radius:50%;background:#fff;transition:transform .15s}
#app-prototype .ap-shutter:active i{transform:scale(.9)}
#app-prototype .ap-rcthumb,#app-prototype .ap-rcdoc{display:grid;place-items:center;height:250px;overflow:hidden;background:#E9E9EE}
#app-prototype .ap-rcthumb .ap-rcpaper,#app-prototype .ap-rcdoc .ap-rcpaper{transform:scale(.7);transform-origin:50% 12%;box-shadow:0 6px 16px rgba(0,0,0,.12)}
#app-prototype .ap-rcthumb img,#app-prototype .ap-rcdoc img{width:100%;height:100%;object-fit:contain}
#app-prototype .ap-rcdoc{height:230px}
#app-prototype .ap-rcearn{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#FCE9F0;color:var(--ap-ink)}
#app-prototype .ap-rcearn>svg{width:26px;height:26px;color:var(--ap-purple)}
#app-prototype .ap-rcearn span{display:grid}
#app-prototype .ap-rcearn b{font-size:17px;font-weight:600}
#app-prototype .ap-rcearn small{font-size:13px;color:var(--ap-dgrey)}
#app-prototype .ap-formcta--2{display:grid;grid-template-columns:1fr 1.6fr;gap:12px}
#app-prototype .ap-rcsum{display:flex;gap:10px;margin:16px 16px 0;padding:14px 16px;background:#fff;font-size:14px;line-height:20px;color:var(--ap-dgrey);box-shadow:0 2px 4px rgba(0,0,0,.06)}
#app-prototype .ap-rcsum svg{flex:none;width:22px;height:22px;color:var(--ap-purple)}
#app-prototype .ap-rcsum b{color:var(--ap-ink);font-weight:600}
#app-prototype .ap-rcst{display:inline-block;margin-bottom:2px;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:600;line-height:16px;white-space:nowrap}
#app-prototype .ap-rcst--pending{background:#FDF0E4;color:#A2520F}
#app-prototype .ap-rcst--approved{background:#E3F4EA;color:#1E7A4C}
#app-prototype .ap-rcst--rejected{background:#FBE7E7;color:#B42318}
#app-prototype .ap-cards--rc .ap-crow__r{display:grid;justify-items:end}
#app-prototype .ap-rctl{margin:4px 16px 0;padding:0;list-style:none}
#app-prototype .ap-rctl li{position:relative;display:flex;gap:12px;padding-bottom:16px}
#app-prototype .ap-rctl li:not(:last-child)::before{content:"";position:absolute;left:11px;top:24px;bottom:0;width:2px;background:#E3E4E8}
#app-prototype .ap-rctl li.is-done:not(:last-child)::before{background:var(--ap-purple)}
#app-prototype .ap-rctl i{flex:none;display:grid;place-items:center;width:24px;height:24px;border:2px solid #C9CAD2;border-radius:50%;background:#fff}
#app-prototype .ap-rctl .is-done i{border-color:var(--ap-purple);background:var(--ap-purple);color:#fff}
#app-prototype .ap-rctl .is-bad i{border-color:#B42318;background:#B42318}
#app-prototype .ap-rctl i svg{width:14px;height:14px}
#app-prototype .ap-rctl span{display:grid}
#app-prototype .ap-rctl b{font-size:15px;font-weight:600}
#app-prototype .ap-rctl small{font-size:13px;color:var(--ap-muted)}
#app-prototype [data-view="receipts"] .ap-formcta .ap-btn svg{width:20px;height:20px}
#app-prototype .ap-rcscan .ap-cropbar button{color:#fff;font-weight:400}
#app-prototype .ap-rcscan .ap-cropbar button[aria-pressed="true"]{color:#FFD24A}
#app-prototype .ap-view--crop{background:#000}
#app-prototype .ap-profile .ap-qr{display:grid;place-items:center;gap:0}

/* ==== Work card: animated preview + "Try the live prototype" (script.js, "Live demo") ====
   The preview is an animated WebP inside <picture>, so .frame img (parallax, hover zoom,
   the morph into the case study) keeps targeting the same <img>. */
.frame picture{display:contents}

/* the live demo dialog: just the phone, same chrome as the reader */
.demo{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--white);color:var(--ink);overflow:auto}
.demo::backdrop{background:var(--white)}
.demo-bar{position:sticky;top:0;z-index:5;background:var(--white);border-bottom:1px solid var(--line)}
.demo-bar__in{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);min-height:var(--bar-h)}
.demo-title{font-size:.9375rem;font-weight:500}
.demo-title span{margin-left:.5em;color:var(--grey);font-weight:400}
.demo-title:focus-visible{outline:none;box-shadow:none}
.demo-acts{display:flex;align-items:center;gap:var(--s3)}
.demo-body{display:grid;place-items:center;min-height:calc(100dvh - var(--bar-h) - 1px)}
.demo #app-prototype,.demo #gp-prototype{width:100%;padding:16px 16px 24px;background:transparent}
@media (max-width:39.99rem){.demo-title span{display:none}.demo-acts{gap:var(--s2)}}
.demo-acts .cs-btn{white-space:nowrap}
@media (max-width:39.99rem){.demo-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.demo-bar__in{justify-content:flex-end}}
/* "Read the case study" is a real link now (it was a decorative label beside the linked card) */
.case__go a{display:inline-flex;align-items:center;gap:.35em;min-height:2.75rem;color:inherit;text-decoration:none}
.case__go a:hover{text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
.case__go{margin-top:var(--s1)}

/* Title-row icons on the Cenomi card: pause/play the preview, open the live prototype.
   They sit above the title link's stretched ::after (which makes the whole card clickable),
   and show their label as a tooltip on hover and keyboard focus. */
.case__head{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem .9rem}
.case__icons{position:relative;z-index:2;display:flex;gap:.4rem}
.case__icon{position:relative;display:grid;place-items:center;width:2.5rem;height:2.5rem;border:1px solid var(--line);border-radius:50%;color:var(--ink);
  transition:background-color .2s,color .2s,border-color .2s}
.case__icon::before{content:"";position:absolute;inset:-.25rem}
.case__icon svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.case__icon .case__i-play,.case__icon .fill{fill:currentColor;stroke:none}
.case__icon .case__i-play{display:none}
.case__icon[aria-pressed="true"] .case__i-pause{display:none}
.case__icon[aria-pressed="true"] .case__i-play{display:block}
@media (hover:hover){.case__icon:hover{background:var(--ink);border-color:var(--ink);color:var(--white)}}   /* not on touch: a tap left it stuck dark */
.case__icon[hidden]{display:none}
.case__icon::after{content:attr(aria-label);position:absolute;left:50%;bottom:calc(100% + .5rem);transform:translate(-50%,.25rem);padding:.35rem .55rem;
  border-radius:4px;background:var(--ink);color:var(--white);font-size:.75rem;font-weight:500;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .15s,transform .15s}
/* tooltips for mouse and keyboard only: on touch a tap left them stuck on screen */
@media (hover:hover){.case__icon:hover::after{opacity:1;transform:translate(-50%,0)}}
.case__icon:focus-visible::after{opacity:1;transform:translate(-50%,0)}
html:not(.js) .case__icons{display:none}

/* Custom cursor, "Interact" shape: over the app prototype's frame the ring fills blue
   and shows a label (Figma 33622:327331); size comes from SHAPES.label in motion.js. */
.cursor{transition:background-color .2s,border-color .2s}
.cursor.is-label{background-color:#2839eb;border-color:#2839eb}
.cursor__label{position:absolute;inset:0;display:grid;place-items:center;color:#fff;font-size:13px;font-weight:500;line-height:1;white-space:nowrap;
  opacity:0;transition:opacity .12s}
.cursor.is-label .cursor__label{opacity:1;transition-delay:.1s}
.cursor__label{gap:.3em;grid-auto-flow:column}
.cursor__arrow{display:inline-block;font-style:normal;transform-origin:50% 55%}
.cursor__label{justify-content:center}
/* "Zoom" shape: over an image that enlarges, the ring fills the same blue and carries a
   magnifier, plus to enlarge, minus at actual size; size comes from SHAPES.zoom in motion.js */
.cursor.is-zoom{background-color:#2839eb;border-color:#2839eb}
.cursor__zoom{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;transition:opacity .12s}
.cursor__zoom svg{width:20px;height:20px}
.cursor.is-zoom .cursor__zoom{opacity:1;transition-delay:.1s}
.cursor.is-zoom-out .cursor__zoom-plus{display:none}
/* the custom cursor already says "enlarge", so the image's own hover mark stays out of the way
   (it still shows on keyboard focus, and on touch screens) */
html.has-cursor .cs-zoom:hover:not(:focus-visible)::after{opacity:0}

/* ---------- Case study extras (Cenomi): results strip, tags, cards, figure pair ----------
   Same type scale and rules as the rest of the reader: hairlines, no fills. */
.cs-body .cs-fig{margin-top:0}
.cs-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3);margin:0;padding:0;list-style:none}
.cs-stats li{display:grid;gap:.4rem;align-content:start;padding-top:var(--s2);border-top:1px solid var(--ink)}
.cs-stats b{font-size:clamp(2.25rem,4vw,3.5rem);font-weight:500;line-height:1;letter-spacing:-.04em}
.cs-stats small{font-size:.4em;font-weight:500;letter-spacing:-.01em;color:var(--grey)}
.cs-stats span{font-size:var(--t-small);line-height:1.45;color:var(--grey);max-width:24ch}
.cs-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin:0;padding:0;list-style:none}
.cs-tags li{padding:.3rem .7rem;border:1px solid var(--line);border-radius:999px;font-size:var(--t-small);line-height:1.3}
.cs-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3);margin:0;padding:0;list-style:none}
.cs-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cs-cards li{display:grid;gap:.35rem;align-content:start;padding-top:var(--s2);border-top:1px solid var(--line)}
.cs-cards h4{margin:0;font-size:1rem;font-weight:600;letter-spacing:-.01em}
.cs-cards p{font-size:var(--t-small);line-height:1.5;color:var(--grey)}
.cs-pair{grid-column:5/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:var(--s3);align-items:start}
.cs-pair .cs-fig{margin-top:0}
.cs-block--big .cs-body{font-size:var(--t-h2);font-weight:500;line-height:1.2;letter-spacing:-.02em}
.cs-impact{display:grid;gap:var(--s2);margin:0;padding:0;list-style:none;font-size:var(--t-h3);font-weight:400;line-height:1.45;letter-spacing:-.01em}
.cs-impact li{display:grid;grid-template-columns:9rem 1fr;gap:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line)}
.cs-impact b{font-weight:600}
.cs-block--last .cs-body--quiet{font-size:var(--t-h3);font-weight:400;line-height:1.45;letter-spacing:-.01em}
@media (max-width:63.99rem){
  .cs-pair{grid-column:1/-1}
  .cs-cards--3{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:39.99rem){
  .cs-stats,.cs-cards,.cs-pair{grid-template-columns:minmax(0,1fr)}
  .cs-impact li{grid-template-columns:minmax(0,1fr);gap:.2rem}
}

/* ==== Greenpertise website prototype (#gp-prototype, gp-prototype.js) ====
   A 1280 x 800 desktop viewport in a browser window, scaled to fit. Colours, type
   and component styles follow greenpertise.com (its "medium screen" layout, which
   is what a 1280px window gets); everything is scoped to #gp-prototype. */
#gp-prototype{--white:#FFFBF6;--bg:#FFF7EE;--beige:#FAECDC;--green:#657557;--mid:#536543;--dark:#2C4219;--orange:#EC863D;--brown:#BF692A;--grey:#8A8A8A;--lgrey:#BABABA;--black:#3D3F40;
  --serif:"Libre Baskerville",Georgia,serif;--sans:Lato,"Helvetica Neue",Arial,sans-serif;
  display:grid;justify-items:center;gap:20px;padding:40px 16px 48px;background:#f4f1f5}
#gp-prototype>img{width:min(100%,900px);height:auto}
#gp-prototype .gp-caption{font-size:var(--t-small);color:var(--ink);text-align:center}
#gp-prototype .gp-stage{position:relative;margin:0 auto}
#gp-prototype .gp-browser{position:absolute;left:0;top:0;width:1280px;height:844px;border-radius:12px;overflow:hidden;background:var(--bg);transform-origin:0 0;
  box-shadow:0 0 0 1px rgba(0,0,0,.12),0 40px 80px -30px rgba(0,0,0,.45)}
#gp-prototype .gp-chrome{display:grid;grid-template-columns:120px 70px 1fr 190px;align-items:center;height:44px;padding:0 14px;background:#ececec;border-bottom:1px solid #d6d6d6;color:#6d6d6d}
#gp-prototype .gp-dots3{display:flex;gap:8px}
#gp-prototype .gp-dots3 i{width:12px;height:12px;border-radius:50%;background:#ff5f57}
#gp-prototype .gp-dots3 i:nth-child(2){background:#febc2e}#gp-prototype .gp-dots3 i:nth-child(3){background:#28c840}
#gp-prototype .gp-navbtns{display:flex;gap:10px}
#gp-prototype .gp-navbtns svg{width:18px;height:18px}
#gp-prototype .gp-url{justify-self:center;display:flex;align-items:center;gap:6px;width:420px;height:28px;justify-content:center;border-radius:7px;background:#fff;font:13px/1 -apple-system,Helvetica,Arial,sans-serif;color:#3a3a3a}
#gp-prototype .gp-url svg{width:13px;height:13px;color:#8a8a8a}
#gp-prototype .gp-viewport{height:800px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
#gp-prototype .gp-site{position:relative;font-family:var(--sans);color:var(--black);background:var(--bg);-webkit-font-smoothing:antialiased;text-align:left}
#gp-prototype .gp-site *{box-sizing:border-box}
/* resets sit at the lowest specificity so every component rule below wins */
:where(#gp-prototype .gp-site) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* the reader's .cs-fig img (full width, grey) must not reach the site's images */
#gp-prototype img{width:auto;height:auto;max-width:none;background:none}
#gp-prototype .gp-site h1,#gp-prototype .gp-site h2,#gp-prototype .gp-site h4,#gp-prototype .gp-site h5,#gp-prototype .gp-site h6,#gp-prototype .gp-site p{margin:0;font-weight:400}
#gp-prototype .gp-site h1{font:700 57px/110% var(--serif);letter-spacing:-3px;color:var(--black)}
#gp-prototype .gp-site h2{font:700 50px/1.15 var(--serif);letter-spacing:-1px}
#gp-prototype .gp-site h4{font:700 28px/125% var(--sans)}
#gp-prototype .gp-site h5,#gp-prototype .gp-site h6{font:700 22px/1.3 var(--serif)}
#gp-prototype .gp-site p{font-size:19px;line-height:140%}
#gp-prototype .gp-cap{font-size:15px!important;color:inherit;opacity:.85}
#gp-prototype .gp-wrap{width:1152px;margin:0 auto}
#gp-prototype .gp-center{text-align:center}
#gp-prototype .gp-pad{padding:110px 0}
#gp-prototype .gp-pad--top0{padding-top:0}
#gp-prototype .gp-site .gp-lead{max-width:880px;margin:20px auto 0}
#gp-prototype .gp-green{background:var(--green);color:var(--white);padding:100px 0}
/* buttons: the site's inset-shadow orange pill */
#gp-prototype .gp-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 14px;border-radius:16px;background:var(--orange);color:var(--white)!important;font:700 20px/1.2 var(--serif)!important;
  box-shadow:-6px -6px 10px 0 rgba(195,109,47,.75) inset;transition:background-color .2s,transform .2s;white-space:nowrap}
#gp-prototype .gp-btn:hover{background:var(--brown)}
#gp-prototype .gp-btn:active{transform:scale(.98)}
#gp-prototype .gp-btn[disabled]{opacity:.45;pointer-events:none}
#gp-prototype .gp-btn--white{background:var(--white);color:var(--orange)!important;box-shadow:-6px -6px 10px 0 #E1D7D0 inset}
#gp-prototype .gp-btn--white:hover{background:var(--white);color:var(--brown)!important}
#gp-prototype .gp-btn--sm{font-size:16px!important;padding:10px 14px}
/* nav */
#gp-prototype .gp-nav{position:sticky;top:0;z-index:5;background:var(--dark);color:var(--white);transition:box-shadow .25s}
#gp-prototype .gp-nav.is-scrolled{box-shadow:0 6px 18px rgba(0,0,0,.18)}
#gp-prototype .gp-nav__in{display:flex;align-items:center;gap:48px;height:80px}
#gp-prototype .gp-logo{display:flex;align-items:center;gap:10px;font:400 28px/1 var(--serif)!important;color:var(--white)!important}
#gp-prototype .gp-links{display:flex;gap:36px;margin-left:24px}
#gp-prototype .gp-links button{position:relative;font:700 16px/1 var(--sans)!important;padding:8px 0;transition:color .2s}
#gp-prototype .gp-links button::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--orange);transform:scaleX(0);transition:transform .3s cubic-bezier(.22,1,.36,1)}
#gp-prototype .gp-links button:hover{color:#f6c79f}
#gp-prototype .gp-links button.is-on::after{transform:scaleX(1)}
#gp-prototype .gp-nav .gp-btn{margin-left:auto}
/* hero */
#gp-prototype .gp-hero__in{display:flex;align-items:center;justify-content:space-between;padding:70px 0 40px}
#gp-prototype .gp-hero__t{display:grid;gap:28px;justify-items:start;width:560px}
#gp-prototype .gp-hero__t h1{color:var(--green)}
#gp-prototype .gp-hero__img{width:470px;height:470px}
/* three steps */
#gp-prototype .gp-steps{display:flex;justify-content:center;gap:28px;margin-top:56px}
#gp-prototype .gp-step{display:grid;justify-items:center;gap:14px;width:340px;padding:40px 32px;border-radius:12px;background:linear-gradient(360deg,rgba(44,66,25,.65) -75%,rgba(101,117,87,.75) 180%)}
#gp-prototype .gp-step img{height:110px;width:auto}
#gp-prototype .gp-person>img{width:240px;height:240px;object-fit:contain}
#gp-prototype .gp-prog li img{width:22px;height:22px}
#gp-prototype .gp-founder>img{width:300px;height:400px}
#gp-prototype .gp-speaker img,#gp-prototype .gp-review img{width:150px;height:150px}
#gp-prototype .gp-prog>img{width:110px;height:110px}
#gp-prototype .gp-logo img{width:52px;height:39px}
/* people */
#gp-prototype .gp-people{display:flex;justify-content:center;gap:48px;margin-top:56px;text-align:left}
#gp-prototype .gp-person{display:grid;justify-items:center;gap:16px;width:460px;padding:48px;border-radius:24px;background:var(--beige)}
#gp-prototype .gp-person h5{text-align:center}
#gp-prototype .gp-person p{font-size:17px}
/* topics */
#gp-prototype .gp-topics{width:650px;margin:48px auto 0;text-align:left}
#gp-prototype .gp-topics h5{margin-bottom:20px}
#gp-prototype .gp-topics__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
#gp-prototype .gp-topic{display:flex;align-items:center;height:64px;padding-left:22px;border-radius:12px;background:var(--beige);box-shadow:-6px -6px 10px 0 rgba(195,109,47,.15) inset;font-size:18px;transition:transform .2s,box-shadow .2s}
#gp-prototype .gp-topic:hover{transform:translateY(-2px);box-shadow:-6px -6px 10px 0 rgba(195,109,47,.25) inset,0 6px 14px rgba(44,66,25,.12)}
#gp-prototype .gp-inline{color:#1a5fd6!important;text-decoration:underline}
/* programmes carousel */
/* programmes: a 2 x 2 grid (two cards, two just below); the icons sit on each card's top edge */
#gp-prototype .gp-progs__grid{display:grid;grid-template-columns:repeat(2,420px);justify-content:center;gap:96px 40px;margin-top:104px;text-align:left}
#gp-prototype .gp-progs__grid .gp-prog{width:auto}
#gp-prototype .gp-track{display:flex;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:4px;scrollbar-width:none;padding:56px 4px 8px;text-align:left}
#gp-prototype .gp-track::-webkit-scrollbar{display:none}
#gp-prototype .gp-prog{position:relative;flex:none;display:grid;align-content:start;gap:18px;width:300px;padding:64px 28px 28px;border-radius:12px;background:var(--mid);scroll-snap-align:start}
#gp-prototype .gp-prog>img{position:absolute;left:50%;top:-52px;transform:translateX(-50%)}
#gp-prototype .gp-prog h5{text-align:center}
#gp-prototype .gp-prog ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
#gp-prototype .gp-prog li{display:flex;align-items:center;gap:10px;font-size:15px}
#gp-prototype .gp-prog .gp-btn{justify-self:start;white-space:normal;font-size:18px!important}
#gp-prototype .gp-arrow{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border-radius:50%;background:var(--white)!important;color:var(--dark)!important;
  box-shadow:0 6px 16px rgba(0,0,0,.2);transition:opacity .2s,transform .2s}
#gp-prototype .gp-arrow:hover{transform:scale(1.06)}
#gp-prototype .gp-arrow[disabled]{opacity:0;pointer-events:none}
#gp-prototype .gp-arrow svg{width:22px;height:22px}
#gp-prototype .gp-arrow--prev{left:-26px}#gp-prototype .gp-arrow--next{right:-26px}
/* about */
#gp-prototype .gp-what{display:flex;gap:64px;margin-top:56px;text-align:left}
#gp-prototype .gp-video{position:relative;flex:none;display:grid;width:470px;height:400px;padding:24px 40px;border-radius:12px;background:var(--mid)!important;color:var(--white)!important;text-align:left;transition:background-color .25s}
#gp-prototype .gp-video:hover{background:var(--dark)!important}
#gp-prototype .gp-video__top{justify-self:end;display:flex;align-items:center;gap:12px;font-size:18px}
#gp-prototype .gp-video__top img{padding:3px;border-radius:6px;background:var(--white)}
#gp-prototype .gp-video__t{align-self:center;font:400 30px/1.3 var(--serif)}
#gp-prototype .gp-what__t{display:grid;gap:14px;align-content:start}
#gp-prototype .gp-what__t h6,#gp-prototype .gp-values h6{display:flex;align-items:center;gap:10px;margin-top:10px}
#gp-prototype .gp-values{margin-top:64px;padding:56px 64px;border-radius:12px;background:var(--beige);text-align:left}
#gp-prototype .gp-values h4{margin-top:16px}
#gp-prototype .gp-values__row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;margin-top:40px}
#gp-prototype .gp-values__row p{font-size:17px;margin-top:6px}
/* founder */
#gp-prototype .gp-founder{display:flex;justify-content:center;gap:64px;margin-top:56px;text-align:left}
#gp-prototype .gp-founder>img{border-radius:8px;object-fit:cover}
#gp-prototype .gp-founder>div{display:grid;gap:10px;align-content:start;max-width:560px}
#gp-prototype .gp-in{justify-self:start;margin-top:8px}
/* café */
#gp-prototype .gp-mid{display:flex;justify-content:center;margin-top:40px}
#gp-prototype .gp-mid--two{gap:16px}
#gp-prototype .gp-speakers{display:grid;gap:48px;width:820px;margin:72px auto 0;text-align:left}
#gp-prototype .gp-speaker{display:flex;gap:40px;align-items:center}
#gp-prototype .gp-speaker img{flex:none;border-radius:50%;object-fit:cover}
#gp-prototype .gp-speaker p{font-size:17px}
#gp-prototype .gp-speaker .gp-cap{margin:4px 0 8px}
/* reviews */
#gp-prototype .gp-reviews{display:grid;grid-template-columns:52px 1fr 52px;align-items:center;gap:32px;width:980px;margin:56px auto 0}
#gp-prototype .gp-reviews .gp-arrow{position:static;margin:0;background:var(--beige)!important;box-shadow:none}
#gp-prototype .gp-review{display:flex;align-items:center;gap:48px;min-height:240px;text-align:left}
#gp-prototype .gp-review img{flex:none;border-radius:8px;object-fit:cover}
#gp-prototype .gp-quote{font:400 22px/1.5 var(--serif)!important;margin-bottom:18px!important}
#gp-prototype .gp-dots{display:flex;justify-content:center;gap:10px;margin-top:28px}
#gp-prototype .gp-dots button{width:10px;height:10px;border-radius:50%;background:var(--lgrey)!important;transition:transform .2s,background-color .2s}
#gp-prototype .gp-dots button[aria-current="true"]{background:var(--orange)!important;transform:scale(1.25)}
/* partners */
#gp-prototype .gp-logos{display:flex;justify-content:space-evenly;align-items:center;gap:80px;margin-top:56px}
#gp-prototype .gp-logos img{height:56px;width:auto;opacity:.6;filter:brightness(0) invert(1);transition:opacity .2s}
#gp-prototype .gp-logos img:hover{opacity:1}
/* faq */
#gp-prototype .gp-faqwrap{width:900px}
#gp-prototype .gp-faqtabs{display:flex;justify-content:center;gap:12px;margin-top:36px}
#gp-prototype .gp-faqtabs button{padding:6px 16px;border:1px solid var(--orange)!important;border-radius:12px;color:var(--orange)!important;font-size:17px;transition:background-color .2s,color .2s}
#gp-prototype .gp-faqtabs button[aria-selected="true"]{background:var(--orange)!important;color:var(--white)!important}
#gp-prototype .gp-faqs{display:grid;gap:28px;margin-top:48px;text-align:left}
#gp-prototype .gp-faq{border-bottom:1px solid var(--lgrey);padding-bottom:22px}
#gp-prototype .gp-faq button{display:flex;align-items:center;justify-content:space-between;gap:24px;width:100%;font:700 22px/1.3 var(--serif)!important;text-align:left}
#gp-prototype .gp-faq button svg{flex:none;width:24px;height:24px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
#gp-prototype .gp-faq button[aria-expanded="true"] svg{transform:rotate(180deg)}
#gp-prototype .gp-faq p{margin-top:14px;font-size:18px}
#gp-prototype .gp-faq p[hidden]{display:none}
/* contact + footer */
#gp-prototype .gp-contact{padding:130px 0}
#gp-prototype .gp-foot{background:var(--dark);color:var(--white);padding:80px 0 28px}
#gp-prototype .gp-foot__row{display:grid;grid-template-columns:1fr .7fr 1.3fr;gap:80px}
#gp-prototype .gp-foot__row>div{display:grid;gap:14px;align-content:start}
#gp-prototype .gp-foot ul{display:grid;gap:10px;margin:14px 0 0;padding:0;list-style:none;font-size:16px}
#gp-prototype .gp-foot ul button:hover,#gp-prototype .gp-foot .gp-cap button:hover{color:#f6c79f}
#gp-prototype .gp-news{display:grid;gap:12px;align-content:start}
#gp-prototype .gp-news .gp-btn{justify-self:start}
#gp-prototype .gp-field{display:grid;gap:6px}
#gp-prototype .gp-field input{height:46px;padding:0 14px;border:1px solid rgba(255,251,246,.5);border-radius:10px;background:transparent;color:inherit;font:16px var(--sans);outline:none}
#gp-prototype .gp-field input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(236,134,61,.3)}
#gp-prototype .gp-check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.4}
#gp-prototype .gp-check input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--orange)}
#gp-prototype .gp-msg{font-size:15px!important;color:#ffb38a}
#gp-prototype .gp-msg.is-ok{color:#b9e3a0}
#gp-prototype .gp-msg[hidden]{display:none}
#gp-prototype .gp-credits{margin-top:64px!important;font-size:14px!important;opacity:.55;text-align:center}
#gp-prototype .gp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
/* booking modal */
#gp-prototype .gp-modal{position:absolute;left:0;right:0;top:44px;bottom:0;z-index:20;display:grid;place-items:center;background:rgba(44,66,25,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#gp-prototype .gp-modal[hidden]{display:none}
#gp-prototype .gp-modal__box{display:grid;grid-template-rows:auto 1fr auto;width:620px;min-height:520px;max-height:700px;border-radius:20px;background:var(--bg);color:var(--black);font-family:var(--sans);box-shadow:0 30px 70px rgba(0,0,0,.3);overflow:hidden}
#gp-prototype .gp-modal__head{display:grid;grid-template-columns:44px 1fr 44px;align-items:center;padding:16px 20px 0;text-align:center}
#gp-prototype .gp-modal__head button{display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:none;color:var(--dark);font-size:30px;line-height:1;cursor:pointer}
#gp-prototype .gp-modal__head button:hover{background:var(--beige)}
#gp-prototype .gp-modal__head svg{width:22px;height:22px}
#gp-prototype .gp-modal__head .gp-cap{font-size:14px!important;letter-spacing:.06em;text-transform:uppercase;color:var(--grey)}
#gp-prototype .gp-bk{display:grid;gap:14px;align-content:start;padding:20px 48px;overflow:auto}
#gp-prototype .gp-bk[hidden]{display:none}
#gp-prototype .gp-bk h4{font:700 30px/1.2 var(--serif);color:var(--dark);margin:0}
#gp-prototype .gp-bk .gp-cap{margin:-4px 0 6px;color:var(--grey);opacity:1}
#gp-prototype .gp-bk__progs{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#gp-prototype .gp-bk__prog,#gp-prototype .gp-bk__days button,#gp-prototype .gp-bk__times button{border:1.5px solid #e6dccf;background:var(--white);color:var(--black);font-family:var(--sans);cursor:pointer;transition:border-color .2s,background-color .2s,transform .15s}
#gp-prototype .gp-bk__prog{display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;text-align:left}
#gp-prototype .gp-bk__prog span{display:grid;gap:2px}
#gp-prototype .gp-bk__prog b{font:700 17px/1.2 var(--serif)}
#gp-prototype .gp-bk__prog small{font-size:13px;color:var(--grey)}
#gp-prototype .gp-bk__prog:hover,#gp-prototype .gp-bk__days button:hover,#gp-prototype .gp-bk__times button:hover{border-color:var(--orange)}
#gp-prototype .gp-bk__prog[aria-checked="true"],#gp-prototype .gp-bk__days [aria-checked="true"],#gp-prototype .gp-bk__times [aria-checked="true"]{border-color:var(--orange);background:#fdf0e3;box-shadow:0 0 0 3px rgba(236,134,61,.18)}
#gp-prototype .gp-bk__days{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
#gp-prototype .gp-bk__days button{display:grid;gap:2px;padding:10px 0;border-radius:12px;font-size:15px;font-weight:700}
#gp-prototype .gp-bk__days small{font-size:12px;font-weight:400;color:var(--grey);text-transform:uppercase;letter-spacing:.05em}
#gp-prototype .gp-bk__times{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
#gp-prototype .gp-bk__times button{padding:10px 18px;border-radius:999px;font-size:15px}
#gp-prototype .gp-bk .gp-field span{font-size:14px;color:var(--grey)}
#gp-prototype .gp-bk .gp-field em{font-style:normal;opacity:.7}
#gp-prototype .gp-bk .gp-field input{border-color:#e6dccf;background:var(--white);color:var(--black)}
#gp-prototype .gp-check--dark{color:var(--black)}
#gp-prototype .gp-bk--done{justify-items:center;text-align:center;padding-top:40px}
#gp-prototype .gp-bk--done p{font-size:18px;line-height:1.5}
#gp-prototype .gp-bk__tick{display:grid;place-items:center;width:84px;height:84px;border-radius:50%;background:var(--green)}
#gp-prototype .gp-modal__foot{display:flex;justify-content:flex-end;gap:12px;padding:18px 48px 28px}
#gp-prototype .gp-toast{position:absolute;left:50%;bottom:28px;z-index:30;margin:0;padding:12px 18px;border-radius:12px;background:var(--dark);color:var(--white);font:15px/1.3 Lato,Arial,sans-serif;
  transform:translate(-50%,16px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
#gp-prototype .gp-toast.is-on{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#gp-prototype *{transition:none!important}}
#gp-prototype .gp-in img{width:33px;height:32px}
/* the Greenpertise card shows the whole browser window on a soft sage ground (as the Cenomi
   phone sits on pink), so the parallax overscan never crops the window's edges */
.frame--browser{background:#dfe4d6}
.frame--browser img{object-fit:contain;padding:11% 12.5%}   /* the window takes about two thirds of the card */
/* a tall figure (the Greenpertise moodboard) keeps to the text column's width so it doesn't run for screens */
.cs-fig--tall{grid-column:5/span 6}
@media (max-width:63.99rem){.cs-fig--tall{grid-column:1/-1}}
/* Greenpertise illustration sheets (from the Figma file): transparent renders straight on the
   reader's white, each sized relative to its Figma frame (--w, in Figma px) times a sheet scale
   (--k, in cqi per Figma px), so the set keeps its proportions at any width */
.cs-fig--clear img,.cs-illus img{background:none}
.cs-illus__set{--k:.07;container-type:inline-size;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4cqi 3cqi;margin:0;padding:clamp(8px,2vw,24px) 0;list-style:none}
.cs-illus--hero .cs-illus__set{--k:.105;column-gap:2.5cqi;align-items:flex-end}   /* six small on top, the two scenes below, as in Figma */
.cs-illus__set li{width:calc(var(--w) * var(--k) * 1cqi)}
.cs-illus__set img{display:block;width:100%;height:auto}
@media (max-width:47.99rem){.cs-illus__set{--k:.16}.cs-illus--hero .cs-illus__set{--k:.24}}
/* Illustrations on white keep well clear of the page edges (they can be enlarged, so they can
   afford to be smaller): the sheets pad their container, so every piece shrinks in proportion
   (sizes are in cqi of the padded box); a single wide illustration (.cs-fig--pad) narrows itself
   and its zoom button, while the caption stays on the page's left edge. */
.cs-illus__set,.cs-fig--pad{--illus-pad:clamp(16px,8vw,160px)}
.cs-illus__set{padding-inline:var(--illus-pad)}
.cs-fig--pad > img,.cs-fig--pad > .cs-zoom{width:calc(100% - 2 * var(--illus-pad));justify-self:center}
/* ---------- Image zoom (case-study figures) ---------- */
/* each figure image is wrapped in a button by script.js; without JS it is just the image */
.cs-zoom{position:relative;display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:zoom-in}
/* a small "enlarge" mark: shown on hover and focus, always on touch screens; not on the
   illustration sheets, where it would cover the smaller pieces */
.cs-zoom::after{content:"";position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a1a' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M9.5 2.5h4v4M13.5 2.5l-5 5M6.5 13.5h-4v-4M2.5 13.5l5-5'/%3E%3C/svg%3E") center/14px no-repeat;
  box-shadow:0 0 0 1px var(--line);opacity:0;transition:opacity .2s}
.cs-zoom:hover::after,.cs-zoom:focus-visible::after{opacity:1}
@media (hover:none){.cs-zoom::after{opacity:1}}
.cs-illus .cs-zoom::after{content:none}
.zoom{width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;border:0;background:var(--white);color:var(--ink);overflow:hidden}
.zoom[open]{display:flex;flex-direction:column}
.zoom::backdrop{background:var(--white)}
.zoom-cap{min-width:0;overflow:hidden;font-size:.9375rem;font-weight:500;white-space:nowrap;text-overflow:ellipsis}
.zoom-cap:focus-visible{outline:none;box-shadow:none}
.zoom-body{--zp:clamp(16px,4vw,48px);flex:1;min-height:0;display:grid;place-items:center;padding:var(--zp);overflow:auto;overscroll-behavior:contain}
/* fitted: as large as the screen allows, never past the file's own pixels (width/height attributes) */
.zoom-img{display:block;width:auto;height:auto;max-width:100%;max-height:calc(100dvh - var(--bar-h) - 1px - 2 * var(--zp))}
.zoom.can-zoom .zoom-img{cursor:zoom-in}
.zoom.is-full .zoom-body{display:block}
.zoom.is-full .zoom-img{max-width:none;max-height:none;margin-inline:auto;cursor:grab}
.zoom.is-dragging .zoom-img{cursor:grabbing}
.zoom.is-dragging{user-select:none}
/* ---------- Highlighted phrases (case studies) ----------
   A light marker behind a few key phrases, barely rounded to suit the site's square
   language. Resting state is fully highlighted (the safety contract: CSS never hides anything);
   script.js empties it (.is-armed) and sweeps it in left to right on scroll (.is-on). The padding is cancelled by equal negative margins, so the
   words don't move; clone repeats it on each line of a wrapped phrase. */
/* each case study marks in its own brand colour, toned to sit between saturated and pastel:
   Greenpertise's sage #657557 lifted to #CBDFB9 (ink on it 12.3:1), Cenomi Rewards' fuchsia
   #DB2E6D softened to #EFBDCF (ink on it 10.6:1); neutral grey for anything unbranded */
mark.hl{--hl:#ececec}
mark.hl--gp{--hl:#CBDFB9}
mark.hl--cr{--hl:#EFBDCF}
mark.hl{color:inherit;background:linear-gradient(var(--hl),var(--hl)) 0 0/100% 100% no-repeat;border-radius:2px;
  padding:0 .15em;margin:0 -.15em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
mark.hl.is-armed{background-size:0% 100%;transition:background-size 1s cubic-bezier(.22,1,.36,1) .15s}
mark.hl.is-armed.is-on{background-size:100% 100%}
@media (prefers-reduced-motion:reduce){mark.hl.is-armed{background-size:100% 100%;transition:none}}
@media (forced-colors:active){mark.hl{background:Mark;color:MarkText}}
/* ---------- About page (about.html) ----------
   Built from the case-study vocabulary (cs-lede, cs-meta, cs-block, frames), so it reads as
   the same site; only the portrait row and a few details are its own. */
.bar nav a[aria-current="page"]{color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.5em}
.ab-kicker{margin-bottom:var(--s3);font-size:var(--t-small);font-weight:700}
.ab{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s5) var(--s3);padding-bottom:var(--s5)}
.ab-hero{grid-column:1/-1;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s4) var(--s3);align-items:stretch}
.frame.ab-portrait{grid-column:1/span 5;aspect-ratio:4/5}   /* a portrait stays a portrait: the phone rule makes tall frames 3:2 */
.ab-hero__text{grid-column:7/-1;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s4)}
.ab-hero .ab-lede{grid-column:auto}
.ab-hero .ab-meta{grid-column:auto;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s3)}
.frame.ab-wide{grid-column:1/-1;aspect-ratio:3/2}   /* not the tablet rule that turns .frame--wide into 4:5 */
.ab-more{font-size:.9375rem;font-weight:500}
.ab-more a{display:inline-flex;align-items:center;gap:.35em;min-height:2.75rem;color:inherit;text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:1px}
@media (max-width:63.99rem){
  .frame.ab-portrait,.ab-hero__text{grid-column:1/-1}
  .frame.ab-portrait{max-width:30rem}
}
@media (max-width:39.99rem){.ab-hero .ab-meta{grid-template-columns:minmax(0,1fr)}}
/* the home About section's link to about.html, tucked under the lead */
.about__more{grid-column:4/span 8;margin-top:calc(var(--s2) - var(--s4))}
@media (max-width:63.99rem){.about__more{grid-column:1/-1}}
/* SplitText wraps each word/char in an inline-block, and text-indent is inherited: inside an
   indented paragraph (.cs-lede, 24%) every word indented itself and the words piled into each
   other. The paragraph's own first line keeps its indent. */
.wd,.ch{text-indent:0}
/* The name's red sweep (motion.js; Figma 33624:327342): each letter has a red copy of itself
   on top (::after), masked by eight thin bars laid out across the whole name: the Figma
   positions as % of the name's width (starts 0, 3.31, 6.61, 10.50, 13.81, 23.63, 38.80,
   48.99; each 2.42% wide). --nw = name width, --cx = this letter's x in the name, --shift =
   where the pattern starts; the resting shift is far off to the right, so with no JS or
   reduced motion nothing is red. Red #c70d0d is the Figma value.
   Agne asked for thicker bars: the whole Figma pattern is scaled 1.8x (bars 4.36% wide, starts
   0, 5.96, 11.90, 18.90, 24.86, 42.53, 69.84, 88.18), keeping the gaps so they don't merge. */
.intro__name{--bars:linear-gradient(90deg,#000 0 4.36%,transparent 0 5.96%,#000 0 10.32%,transparent 0 11.90%,
  #000 0 16.26%,transparent 0 18.90%,#000 0 23.26%,transparent 0 24.86%,#000 0 29.22%,transparent 0 42.53%,
  #000 0 46.89%,transparent 0 69.84%,#000 0 74.20%,transparent 0 88.18%,#000 0 92.54%,transparent 0);
  white-space:nowrap}
/* The letters stay inline: inline-block split the name for screen readers ("A g n e ...").
   An inline letter's box is the font's own ascent-to-descent area, not the line, so the copy
   uses line-height:normal to put its baseline in the same place (with the line's height it
   sat ~0.1em high). The mask is taller than the box and unclipped (no-clip), so italic
   overhangs and descenders that lean outside the box still get their bars. */
.intro__name .ch{position:relative}
.intro__name .ch::after{content:attr(data-ch);content:attr(data-ch) / "";   /* "/ ''": silent to screen readers, so the name is not read twice */
  position:absolute;inset:0;line-height:normal;white-space:pre;color:#c70d0d;pointer-events:none;
  -webkit-mask:var(--bars) calc(var(--shift,99999px) - var(--cx,0px)) 50%/var(--nw,0px) 300% no-repeat no-clip;
          mask:var(--bars) calc(var(--shift,99999px) - var(--cx,0px)) 50%/var(--nw,0px) 300% no-repeat no-clip}
/* The name in the home headline: Bodoni Moda Italic (variable, loaded for these letters only),
   a high-contrast fashion-magazine italic, set semi-bold and a touch larger so it lands harder
   than the Helvetica sentence around it. (Fraunces Italic first: too soft to carry the line.)
   It links to about.html. Black, like the sentence; the red comes only from the sweep. */
.intro__name{font-family:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif;font-style:italic;font-weight:600;
  font-variation-settings:"opsz" 6;font-size:1.08em;   /* the smallest optical size: sturdier hairlines (at 96, and still at 28, the A's left leg was a thread) */letter-spacing:-.02em;color:inherit;text-decoration:none}
.intro__name:focus-visible{outline-offset:6px}
/* The photo that follows the pointer over the name (motion.js). Hidden and shown from JS only. */
.name-peek{position:fixed;left:0;top:0;z-index:550;width:clamp(170px,15vw,240px);aspect-ratio:2/3;overflow:hidden;
  border-radius:3px;background:var(--line);pointer-events:none;will-change:transform,opacity}
.name-peek img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* The photo piles above the lead (about.js drags them). The area takes whatever height the
   portrait leaves beside the text; each photo sits at its pile's centre (--x, --y), tilted
   (--r), moved by the drag (--dx, --dy). No frame: just the photo and a soft shadow. */
.ab-drag{position:relative;flex:1;min-height:20rem}
.ab-drag__item{position:absolute;left:var(--x);top:var(--y);display:block;padding:0;border:0;background:var(--line);
  border-radius:2px;box-shadow:0 18px 40px -12px rgba(26,26,26,.35),0 4px 10px rgba(26,26,26,.12);
  transform:translate(-50%,-50%) translate(var(--dx,0px),var(--dy,0px)) rotate(var(--r,0deg));
  cursor:grab;touch-action:manipulation;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:box-shadow .2s,scale .2s}   /* touch scrolls the page; about.js picks an item up after a press and hold */
.ab-drag__item--portrait{width:clamp(6.5rem,10vw,9.5rem);aspect-ratio:2/3}
.ab-drag__item--landscape{width:clamp(9rem,14.5vw,13.5rem);aspect-ratio:3/2}
.ab-drag__item img{display:block;width:100%;height:100%;object-fit:cover;border-radius:inherit;pointer-events:none}
.ab-drag__item.is-dragging{cursor:grabbing;scale:1.04;box-shadow:0 28px 60px -14px rgba(26,26,26,.45),0 6px 14px rgba(26,26,26,.15)}
.ab-drag__item:focus-visible{outline-offset:4px}
@media (prefers-reduced-motion:reduce){.ab-drag__item{transition:none}}
@media (max-width:39.99rem){.ab-drag{min-height:16rem}}   /* phones: the piles are smaller, so is their space */
/* ---------- About: the pinboard ----------
   The drag area becomes a board: a light warm surface with a fine dot texture (a pinboard
   without heavy cork), and every photo and note pinned with a red pushpin (the site's red).
   The portrait keeps its 4:5 at the top of the row now that the board makes the column taller. */
.frame.ab-portrait{align-self:start}
.ab-drag{min-height:27rem;border-radius:4px;
  background:#F5F2ED radial-gradient(circle,rgba(120,100,70,.14) 1px,transparent 1.3px) 0 0/14px 14px}
.ab-pin{position:absolute;top:-7px;left:50%;z-index:2;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle at 35% 32%,#ff8a8a 0 18%,#e61428 45%,#9e0c1a 100%);
  box-shadow:0 3px 4px rgba(26,26,26,.35);pointer-events:none}
/* sticky notes: square, a handwritten line, a flatter shadow than the photos */
.ab-drag__item--note{display:flex;align-items:center;width:clamp(6.75rem,9.5vw,8.75rem);aspect-ratio:1;padding:1.1rem .75rem .75rem;
  border-radius:1px;background:var(--note);color:var(--ink);text-align:left;
  font:500 clamp(1.05rem,1.55vw,1.35rem)/1.05 "Caveat","Bradley Hand","Segoe Print",cursive;
  box-shadow:0 10px 18px -10px rgba(26,26,26,.35),0 2px 4px rgba(26,26,26,.08)}
.ab-note--yellow{--note:#FFF0A1}
.ab-note--pink{--note:#F9CEDC}
.ab-note--mint{--note:#D5ECCB}
@media (max-width:39.99rem){.ab-drag{min-height:23rem}}
/* phones: the four notes did not fit in one row (they hung off the board and covered each
   other's words), so each item has a phone position (--xm/--ym): notes in a 2x2 grid */
@media (max-width:39.99rem){
  .ab-drag{min-height:30rem}
  .ab-drag__item{left:var(--xm,var(--x));top:var(--ym,var(--y))}
}
/* the Instagram handle after its link label, quieter than the label (white at 65% on the ink
   footer measures about 7.6:1) */
.contact__handle{margin-left:.4em;color:rgba(255,255,255,.65)}
/* ---------- Graphics carousel (script.js) ----------
   One row drifting left forever; every frame the same height (--h), each piece as wide as its
   shape. The row is the originals plus one set of clones, so sliding -50% lands on the start.
   Hover (or focus, or the pause button) stops it; .is-manual is the still, scrollable strip
   used for keyboard focus and touch. Soft fades at both ends hide where pieces enter. */
.gfx-rail{position:relative;overflow-x:clip;padding-block:var(--s2);
  -webkit-mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.gfx-rail.is-manual{overflow-x:auto;scrollbar-width:none}   /* still scrollable by drag, swipe, wheel and focus; no bar flashing in */
.gfx-rail.is-manual::-webkit-scrollbar{display:none}
.gfx-rail:has(.is-marquee){cursor:grab}
.gfx-rail.is-dragging{cursor:grabbing;user-select:none}
.gfx-rail img{-webkit-user-drag:none}
/* "View all": the plain grid, every piece at once */
.gfx-rail.is-all{overflow:visible;-webkit-mask:none;mask:none;padding-block:0}
.gfxgrid.is-marquee{--h:clamp(13rem,22vw,21rem);display:flex;align-items:start;gap:0;width:max-content;
  animation:gfx-drift var(--dur,90s) linear infinite}
.gfx-carousel:hover .gfxgrid.is-marquee,.gfxgrid.is-marquee.is-paused,.gfx-rail.is-manual .gfxgrid.is-marquee{animation-play-state:paused}
.gfx-rail.is-manual .gfxgrid.is-marquee{animation:none}
.is-marquee .gfx,.is-marquee .gfx[data-span]{flex:none;grid-column:auto;width:var(--h);margin-right:var(--s3)}
.is-marquee .gfx[data-shape="land"]{width:calc(var(--h) * 1.5)}
.is-marquee .gfx[data-shape="port"]{width:calc(var(--h) * .8)}
.is-marquee .frame,.is-marquee .frame--wide,.is-marquee .frame--tall{aspect-ratio:auto;height:var(--h)}
.gfxgrid:not(.is-marquee) .gfx--clone{display:none}
@keyframes gfx-drift{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.gfxgrid.is-marquee{animation:none}}
.gfx-ctrls{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s3)}
.gfx-ctrls[hidden]{display:none}
/* arrows sit at the right of the controls row; "View all" has no row to step through */
.gfx-arrows{display:flex;gap:.4rem;margin-left:auto}
.gfx-carousel:has(.is-all) .gfx-arrows{display:none}
/* a single image in the lightbox fills the width instead of half of it */
.lb-imgs--one{grid-template-columns:minmax(0,1fr)}
/* a piece whose artwork runs to the file's edges (the Bronx lettering) is shown whole on white,
   not cropped to fill its frame */
.gfx[data-fit="whole"] .frame{background:#fff}
.gfx[data-fit="whole"] .frame img{object-fit:contain;padding:4% 8%}
/* ---------- Resume page (resume.html, resume.js) ----------
   Locked: a quiet card with the password field. Unlocked: the resume drawn in the case-study
   layout (red sticky labels, stats strip, tags), plus a theme filter and folding roles. */
.rs{padding-bottom:var(--s5)}
.rs-lock{max-width:36rem;display:grid;gap:var(--s2);padding-top:var(--s3);border-top:1px solid var(--ink)}   /* a ruled block, like the rest of the site */
.rs-lock[hidden]{display:none}
.rs-lock__icon{width:1.75rem;height:1.75rem;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round}
.rs-lock__h{font-size:var(--t-h3);font-weight:500;letter-spacing:-.01em}
.rs-lock__p{color:var(--grey)}
.rs-lock__p a{color:var(--ink)}
.rs-lock__row{display:flex;flex-wrap:wrap;align-items:end;gap:var(--s3);margin-top:var(--s3)}
.rs-lock__label{flex-basis:100%;font-size:var(--t-small);color:var(--grey);margin-bottom:-.6rem}
.rs-lock__field{position:relative;flex:1;min-width:12rem;display:flex}   /* holds the input and its eye */
/* the field is a single underline, the site's red when focused; the focus ring stays for keyboards */
.rs-lock__input{flex:1;min-width:0;height:2.75rem;padding:0 3rem 0 0;border:0;border-bottom:1px solid var(--ink);border-radius:0;background:none;color:var(--ink);font:inherit;font-size:1.125rem}
.rs-lock__input:focus{border-bottom-color:var(--red);outline:none}
.rs-lock__input:focus-visible{box-shadow:0 1px 0 var(--red)}
.rs-lock__msg{min-height:1.5em;font-size:var(--t-small);font-weight:500;color:var(--ink)}
.rs-go{font-size:1rem}
.rs-go:disabled,.rs-actions .cs-btn:disabled{opacity:.55;cursor:progress}
.rs-doc.is-in{animation:rs-in .6s cubic-bezier(.22,1,.36,1)}
@keyframes rs-in{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){.rs-doc.is-in{animation:none}}
.rs-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s3);padding-bottom:var(--s4);margin-bottom:var(--s4);border-bottom:1px solid var(--line)}
.rs-contact{display:grid;grid-template-columns:repeat(2,minmax(0,auto));gap:var(--s2) var(--s4);margin:0;padding:0;list-style:none}
.rs-contact li{display:grid;gap:.1rem;min-width:0}
.rs-contact span{font-size:var(--t-small);color:var(--grey)}
.rs-contact a{color:var(--ink);overflow-wrap:anywhere}
.rs-actions{display:flex;flex-wrap:wrap;gap:var(--s4)}
.rs-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.rs-filter{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem}
.rs-filter__k{margin-right:.4rem;font-size:var(--t-small);color:var(--grey)}
.rs-chip{min-height:2rem;padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;background:var(--white);color:var(--ink);font-size:.875rem;transition:border-color .2s,background-color .2s,color .2s}
.rs-chip:hover{border-color:var(--ink)}
.rs-chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.rs-filter__count{min-height:1.4em;font-size:var(--t-small);color:var(--grey)}
.rs-role{border-top:1px solid var(--line)}
.rs-role:last-of-type{border-bottom:1px solid var(--line)}
.rs-role summary{display:grid;grid-template-columns:10rem minmax(0,1fr) auto;align-items:baseline;gap:.15rem var(--s3);padding:var(--s3) 0;list-style:none;cursor:pointer}
.rs-role summary::-webkit-details-marker{display:none}
.rs-role__when{grid-row:span 2;font-size:var(--t-small);color:var(--grey)}
.rs-role__title{font-weight:600;letter-spacing:-.01em}
.rs-role__org{grid-column:2;font-size:.9375rem;color:var(--grey)}
.rs-role__n{grid-column:3;grid-row:1 / span 2;align-self:center;display:flex;align-items:center;gap:.6rem;font-size:var(--t-small);color:var(--grey)}
.rs-role__n::after{content:"";width:.55rem;height:.55rem;border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.rs-role[open] .rs-role__n::after{transform:translateY(2px) rotate(-135deg)}
.rs-role summary:hover .rs-role__title{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.rs-points{display:grid;gap:.7rem;margin:0 0 var(--s3);padding:0 0 0 calc(10rem + var(--s3));list-style:none;font-size:1rem;line-height:1.55}
.rs-points li{position:relative;padding-left:1.1rem;border-radius:2px;transition:opacity .25s,background-color .25s,box-shadow .25s}
.rs-points li::before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;background:var(--ink)}
.rs-points li.is-dim{opacity:.4}
.rs-points li.is-hit{background:#f1f1f1;box-shadow:0 0 0 .45rem #f1f1f1}   /* the shadow pads the highlight without moving the text */
.rs-points li.is-hit::before{background:var(--red)}
.rs-edu{display:grid;margin:0}
.rs-edu div{display:grid;gap:.1rem;padding:.7rem 0;border-top:1px solid var(--line)}
.rs-edu dt{font-weight:600}
.rs-edu dd{margin:0;color:var(--grey)}
@media (max-width:47.99rem){
  .rs-contact{grid-template-columns:minmax(0,1fr)}
  .rs-stats{grid-template-columns:minmax(0,1fr)}
  .rs-role summary{grid-template-columns:minmax(0,1fr) auto}
  .rs-role__when{grid-row:auto;grid-column:1}
  .rs-role__org{grid-column:1}
  .rs-role__n{grid-column:2;grid-row:1 / span 3}
  .rs-points{padding-left:0}
}
.rs-body h3:focus-visible{outline:none;box-shadow:none}   /* focus lands here after unlocking (for screen readers), it isn't a control */
/* the show / hide password eye, inside the field's right end; the browser's own reveal button
   (Edge) is hidden so there are never two */
.rs-lock__eye{position:absolute;bottom:0;right:0;display:grid;place-items:center;width:2.75rem;height:2.75rem;color:var(--grey);border-radius:2px}
.rs-lock__eye:hover{color:var(--ink)}
.rs-lock__eye svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.rs-lock__eye .rs-eye__off{display:none}
.rs-lock__eye[aria-pressed="true"] .rs-eye__on{display:none}
.rs-lock__eye[aria-pressed="true"] .rs-eye__off{display:block}
.rs-lock__input::-ms-reveal{display:none}
@media (prefers-reduced-motion:no-preference){.cs-btn:hover .arw--down{translate:0 .2rem}}   /* the download arrow nudges down, not across */
/* ==== Greenpertise prototype: the MOBILE site (#gp-prototype.is-m, on phones) ====
   gp-prototype.js renders the same site at 390 x 844 inside a phone (bezel and radius as the
   Cenomi phone) when it has under 600px of room. Sizes below are the phone's own CSS px; the
   whole phone is then scaled to fit, like the desktop window. */
#gp-prototype .gp-burger,#gp-prototype .gp-menu{display:none}
#gp-prototype.is-m .gp-browser{width:414px;height:868px;padding:12px;border-radius:58px;background:#111;box-shadow:0 40px 80px -40px rgba(0,0,0,.5)}
#gp-prototype .gp-mscreen{position:relative;width:390px;height:844px;border-radius:46px;overflow:hidden;background:var(--bg)}
#gp-prototype .gp-mstatus{display:flex;align-items:center;justify-content:space-between;height:47px;padding:4px 30px 0 44px;background:var(--dark);color:#fff;font:600 16px/1 -apple-system,Helvetica,Arial,sans-serif}
#gp-prototype .gp-msys{display:flex;align-items:center;gap:3px}
#gp-prototype .gp-msys i{width:3px;background:#fff;border-radius:1px}
#gp-prototype .gp-msys i:nth-child(1){height:5px}#gp-prototype .gp-msys i:nth-child(2){height:8px}#gp-prototype .gp-msys i:nth-child(3){height:11px}
#gp-prototype .gp-msys b{width:24px;height:12px;margin-left:6px;border:1.5px solid #fff;border-radius:4px;box-shadow:inset 0 0 0 2px var(--dark);background:#fff}
#gp-prototype .gp-murl{display:flex;align-items:center;justify-content:center;height:52px;background:var(--dark)}
#gp-prototype .gp-murl span{display:flex;align-items:center;justify-content:center;gap:6px;width:330px;height:36px;border-radius:12px;background:rgba(255,251,246,.14);color:#fff;font:15px/1 -apple-system,Helvetica,Arial,sans-serif}
#gp-prototype .gp-murl svg{width:13px;height:13px}
#gp-prototype.is-m .gp-viewport{height:745px}
#gp-prototype.is-m .gp-wrap{width:auto;margin:0 20px}
#gp-prototype.is-m .gp-site h1{font-size:38px;letter-spacing:-1.5px}
#gp-prototype.is-m .gp-site h2{font-size:31px;letter-spacing:-.5px}
#gp-prototype.is-m .gp-site h4{font-size:22px}
#gp-prototype.is-m .gp-site h5,#gp-prototype.is-m .gp-site h6{font-size:20px}
#gp-prototype.is-m .gp-site p{font-size:16px}
#gp-prototype.is-m .gp-cap{font-size:14px!important}
#gp-prototype.is-m .gp-pad{padding:56px 0}
#gp-prototype.is-m .gp-pad--top0{padding-top:0}
#gp-prototype.is-m .gp-green{padding:56px 0}
#gp-prototype.is-m .gp-site .gp-lead{margin-top:14px}
#gp-prototype.is-m .gp-btn{min-height:48px;font-size:17px!important;padding:12px 16px}
/* nav: logo + menu button; the links and the call button live in the menu */
#gp-prototype.is-m .gp-nav__in{height:64px;gap:12px}
#gp-prototype.is-m .gp-logo{font-size:22px!important;gap:8px}
#gp-prototype.is-m .gp-logo img{width:40px;height:30px}
#gp-prototype.is-m .gp-links,#gp-prototype.is-m .gp-nav__in>.gp-btn{display:none}
#gp-prototype.is-m .gp-burger{display:grid;align-content:center;gap:6px;width:48px;height:48px;margin-left:auto;padding:0 11px;border-radius:12px;color:var(--white)}
#gp-prototype.is-m .gp-burger i{display:block;height:2px;border-radius:1px;background:currentColor;transition:transform .25s,opacity .2s}
#gp-prototype.is-m .gp-burger[aria-expanded="true"] i:nth-child(1){transform:translateY(8px) rotate(45deg)}
#gp-prototype.is-m .gp-burger[aria-expanded="true"] i:nth-child(2){opacity:0}
#gp-prototype.is-m .gp-burger[aria-expanded="true"] i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
#gp-prototype.is-m .gp-menu{display:grid;gap:2px;padding:4px 20px 24px;background:var(--dark);border-top:1px solid rgba(255,251,246,.12)}
#gp-prototype.is-m .gp-menu[hidden]{display:none}
#gp-prototype.is-m .gp-menu>button:not(.gp-btn){min-height:52px;text-align:left;font:700 19px/1 var(--serif)!important;color:var(--white)!important;border-bottom:1px solid rgba(255,251,246,.1)}
#gp-prototype.is-m .gp-menu .gp-btn{justify-self:start;margin-top:18px}
/* sections stack */
#gp-prototype.is-m .gp-hero__in{flex-direction:column;align-items:stretch;gap:12px;padding:36px 0 32px}
#gp-prototype.is-m .gp-hero__t{width:auto;gap:20px}
#gp-prototype.is-m .gp-hero__img{width:280px;height:280px;align-self:center}
#gp-prototype.is-m .gp-steps{flex-direction:column;gap:16px;margin-top:32px}
#gp-prototype.is-m .gp-step{width:auto;padding:28px 22px}
#gp-prototype.is-m .gp-step img{height:90px}
#gp-prototype.is-m .gp-people{flex-direction:column;gap:20px;margin-top:32px}
#gp-prototype.is-m .gp-person{width:auto;padding:28px 22px}
#gp-prototype.is-m .gp-person>img{width:180px;height:180px}
#gp-prototype.is-m .gp-person p{font-size:16px}
#gp-prototype.is-m .gp-topics{width:auto;margin-top:32px}
#gp-prototype.is-m .gp-topics__grid{grid-template-columns:1fr;gap:10px}
#gp-prototype.is-m .gp-topic{height:52px;font-size:16px}
#gp-prototype.is-m .gp-progs__grid{grid-template-columns:1fr;gap:76px;margin-top:84px}
#gp-prototype.is-m .gp-prog{padding:60px 22px 24px}
#gp-prototype.is-m .gp-prog li{font-size:16px}
#gp-prototype.is-m .gp-what{flex-direction:column;gap:28px;margin-top:32px}
#gp-prototype.is-m .gp-video{width:auto;height:220px;padding:20px 22px}
#gp-prototype.is-m .gp-video__t{font-size:24px}
#gp-prototype.is-m .gp-values{margin-top:36px;padding:28px 22px}
#gp-prototype.is-m .gp-values__row{grid-template-columns:1fr;gap:20px;margin-top:24px}
#gp-prototype.is-m .gp-values__row p{font-size:16px}
#gp-prototype.is-m .gp-founder{flex-direction:column;align-items:center;gap:24px;margin-top:32px}
#gp-prototype.is-m .gp-founder>img{width:240px;height:320px}
#gp-prototype.is-m .gp-in{min-width:48px;min-height:48px}
#gp-prototype.is-m .gp-speakers{width:auto;gap:32px;margin-top:40px}
#gp-prototype.is-m .gp-speaker{flex-direction:column;align-items:flex-start;gap:16px}
#gp-prototype.is-m .gp-speaker img{width:110px;height:110px}
#gp-prototype.is-m .gp-speaker p{font-size:16px}
/* reviews: the quote above, the arrows side by side under it */
#gp-prototype.is-m .gp-reviews{width:auto;grid-template-columns:1fr 1fr;gap:20px 16px;margin-top:32px}
#gp-prototype.is-m .gp-review{grid-column:1/-1;grid-row:1;flex-direction:column;align-items:flex-start;gap:18px;min-height:0}
#gp-prototype.is-m .gp-review img{width:96px;height:96px}
#gp-prototype.is-m .gp-quote{font-size:18px!important}
#gp-prototype.is-m .gp-reviews .gp-arrow{grid-row:2;width:48px;height:48px}
#gp-prototype.is-m .gp-reviews .gp-arrow:first-child{justify-self:end}
#gp-prototype.is-m .gp-dots{gap:4px}
#gp-prototype.is-m .gp-dots button{width:28px;height:28px;background:none!important;position:relative}
#gp-prototype.is-m .gp-dots button::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--lgrey)}
#gp-prototype.is-m .gp-dots button[aria-current="true"]{background:none!important;transform:none}
#gp-prototype.is-m .gp-dots button[aria-current="true"]::before{background:var(--orange);inset:8px}
#gp-prototype.is-m .gp-logos{flex-wrap:wrap;gap:28px 40px;margin-top:32px}
#gp-prototype.is-m .gp-logos img{height:40px}
#gp-prototype.is-m .gp-faqwrap{width:auto}
#gp-prototype.is-m .gp-faqtabs button{min-height:44px;padding:6px 20px}
#gp-prototype.is-m .gp-faqs{gap:4px;margin-top:28px}
#gp-prototype.is-m .gp-faq{padding-bottom:0}
#gp-prototype.is-m .gp-faq button{min-height:60px;font-size:18px!important}
#gp-prototype.is-m .gp-faq p{margin:0 0 18px;font-size:16px}
#gp-prototype.is-m .gp-contact{padding:64px 0}
#gp-prototype.is-m .gp-mid--two{flex-direction:column;align-items:center;gap:12px}
#gp-prototype.is-m .gp-foot{padding:48px 0 24px}
#gp-prototype.is-m .gp-foot__row{grid-template-columns:1fr;gap:36px}
#gp-prototype.is-m .gp-foot ul{gap:0}
#gp-prototype.is-m .gp-foot ul button{min-height:44px;font-size:16px}
#gp-prototype.is-m .gp-credits{margin-top:36px!important}
/* booking: a bottom sheet under the address bar */
#gp-prototype.is-m .gp-modal{top:99px;place-items:end stretch}
#gp-prototype.is-m .gp-modal__box{width:auto;min-height:0;max-height:100%;border-radius:22px 22px 0 0}
#gp-prototype.is-m .gp-modal__head{padding:12px 12px 0}
#gp-prototype.is-m .gp-modal__head button{width:48px;height:48px}
#gp-prototype.is-m .gp-bk{padding:12px 20px}
#gp-prototype.is-m .gp-bk h4{font-size:24px}
#gp-prototype.is-m .gp-bk__progs{grid-template-columns:1fr}
#gp-prototype.is-m .gp-bk__prog{min-height:64px}
#gp-prototype.is-m .gp-bk__days{grid-template-columns:repeat(3,1fr)}
#gp-prototype.is-m .gp-bk__days button{min-height:56px}
#gp-prototype.is-m .gp-bk__times button{min-height:44px}
#gp-prototype.is-m .gp-modal__foot{padding:14px 20px 28px}
#gp-prototype.is-m .gp-modal__foot .gp-btn{flex:1;justify-content:center}
#gp-prototype.is-m .gp-toast{bottom:36px;max-width:340px;text-align:center}
/* Touch: the prototypes must never trap the page. Their screens contain overscroll on desktop
   (the wheel stops at the end of the phone's list), but on a touchscreen the phone fills most of
   the screen, so a swipe that runs past the end of its list carries on scrolling the page. */
@media (hover:none),(pointer:coarse){
  #app-prototype .ap-scroll,#app-prototype .ap-sheet__body,#gp-prototype .gp-viewport{overscroll-behavior:auto}
}
#gp-prototype .gp-bk__prog img{flex:none;width:56px;height:56px;object-fit:contain}   /* the global img reset let them grow to their file size */
/* ---------- Phones and touch (mobile audit, 2026-10-12) ----------
   Reading text is 16px on phones; short labels ("Selected work", "Role", tags in the graphics
   captions, "© 2026") stay at 13px, as agreed. */
@media (max-width:39.99rem){
  .case__facts>div,.cs-fig figcaption,.cs-cards p,.cs-stats span,.sec__note,.contact__end a,.lb-note{font-size:1rem}
  .cs-tags li{font-size:.9375rem}
}
/* touch targets: at least 44px tall, and buttons that sit side by side get room between them */
@media (pointer:coarse){
  .contact__cols li a,.contact__end a,.rs-contact a{min-height:2.75rem}
  .contact__mail{padding-block:.5rem}
  .case__icons,.gfx-arrows{gap:.75rem}
  .rs-chip{min-height:2.75rem}
  .rs-filter{gap:.5rem}
  .rs-actions .cs-btn{padding-inline:.5rem;margin-inline:-.5rem}
  .rs-contact a{display:inline-flex;align-items:center}
}
.ab-drag__item.is-lifted{scale:1.06;box-shadow:0 30px 60px -14px rgba(26,26,26,.5),0 6px 14px rgba(26,26,26,.18)}   /* picked up by a press and hold */