/* priahq.com — the page is meant to feel like the antidote to the thing it
   describes: one idea at a time, a lot of room, and the product itself as the
   only imagery. The palette and the two typefaces are the app's own. */
:root{
  --ink:#142628;          /* the deep teal-black the app is built on */
  --ink-2:#1B3033;
  --ivory:#F7F6F1;
  --paper:#FFFFFF;
  --brass:#B08D57;        /* Ask Pria's gold — spent sparingly */
  --forest:#1E4D43;
  --champagne:#E7D8AD;
  --muted:#5C6C6B;
  --line:rgba(20,38,40,.12);
  --line-soft:rgba(20,38,40,.07);
  --serif:'Newsreader',Iowan Old Style,Palatino,Georgia,serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--ivory);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,.display{font-family:var(--serif);font-weight:400;letter-spacing:-.014em;margin:0}
h1{font-size:clamp(2.6rem,5.2vw,3.9rem);line-height:1.06}
h2{font-size:clamp(2.1rem,4.4vw,3.3rem);line-height:1.1}
h3{font-size:1.3rem;line-height:1.25}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 28px}
.narrow{max-width:760px}
.lede{font-size:1.2rem;line-height:1.55;color:var(--muted);max-width:34rem}
.eyebrow{font-size:.74rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:4px}

/* ---------- header ---------- */
/* All but opaque (site 1.4.1): at .88 what scrolled under it showed through as
   a smear of words behind the links, which read as the two overlapping. */
.top{position:sticky;top:0;z-index:50;background:rgba(247,246,241,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line-soft)}
.top-in{display:flex;align-items:center;gap:28px;height:72px}
/* The wordmark itself (site 1.4.3, Paul, 30 September 2026): the logo's own
   lettering, dark on the ivory bar and cream over the ink, with its gold HQ.
   It was typed in the serif. */
.mark{display:flex;align-items:center;text-decoration:none}
.mark img{display:block;height:38px;width:auto}
@media (max-width:860px){.mark img{height:34px}}
.mark .mark-light{display:none}
.top.over .mark .mark-light{display:block}
.top.over .mark .mark-dark{display:none}
.top nav{display:flex;gap:26px;margin-left:auto;font-size:.92rem}
.top nav a{text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap}
.top nav a:hover{color:var(--ink);border-bottom-color:var(--brass)}
.btn{display:inline-block;text-decoration:none;font-weight:600;font-size:.96rem;padding:14px 26px;border-radius:999px;white-space:nowrap;transition:background .15s,filter .15s}
.btn-ink{background:var(--ink);color:var(--ivory)}
.btn-ink:hover{background:var(--forest)}
.btn-brass{background:var(--brass);color:#fff}
.btn-brass:hover{filter:brightness(1.07)}
.top .btn{padding:11px 20px;font-size:.9rem}
.quiet{text-decoration:none;font-size:.98rem;border-bottom:1px solid var(--brass);padding-bottom:2px}
/* Sign in, as a mark rather than a word: the header earns its calm by having
   one label fewer, and the thing it opens is not a page of the site. */
.signin-mark{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:999px;color:var(--muted);border:1px solid transparent;transition:color .15s,border-color .15s}
.signin-mark:hover{color:var(--ink);border-color:var(--line)}
.top nav .signin-mark{padding:0;border-bottom:0}
.menu-toggle{display:none;margin-left:auto;background:none;border:1px solid var(--line);border-radius:999px;padding:9px 16px;font:inherit;font-size:.9rem;cursor:pointer;color:var(--ink)}

/*
 * Over the opening (site 1.4.0). Each page opens on ink, as app.priahq.com
 * does, and the header lies over it with nothing of its own behind it, so the
 * ink runs to the top of the screen; site.js takes .over away once the
 * opening has scrolled past, and the header is the ivory bar again. The home
 * page's opening is two halves, and so is its header: the mark over the ink,
 * everything else over the ivory. Every other page's is ink all the way
 * across, and its links go light.
 */
/* No fade between the two: a quarter-second of it was a header you could see
   through while the page moved under it (site 1.4.2). */
.top.over{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.top.over .mark{color:var(--ivory)}
.top.over.top-full .menu-toggle{color:var(--ivory);border-color:rgba(247,246,241,.3)}
@media (min-width:861px){
  .top.top-split .top-in{max-width:none;padding:0 clamp(20px,3vw,40px) 0 0}
  .top.top-split .mark{flex:none;width:var(--split);padding-left:clamp(32px,5vw,64px)}
}
/* The opening has its own Book a conversation; where the header has no room
   for both, it gives its own up. */
@media (min-width:1024px) and (max-width:1319px){.top.top-split .btn{display:none}}
@media (min-width:1024px){
  .top.over.top-full nav a{color:rgba(247,246,241,.72)}
  .top.over.top-full nav a:hover{color:var(--ivory);border-bottom-color:var(--champagne)}
  .top.over.top-full .signin-mark:hover{border-color:rgba(247,246,241,.3)}
  .top.over.top-full .btn-ink{background:var(--ivory);color:var(--ink)}
  .top.over.top-full .btn-ink:hover{background:var(--champagne)}
}

/* ---------- sections ---------- */
.sec{padding:clamp(80px,11vw,152px) 0}
.sec-tight{padding:clamp(64px,8vw,112px) 0}
.centre{text-align:center}
.centre .lede{margin-left:auto;margin-right:auto}
.sec h2 + .lede,.sec h2 + p{margin-top:24px}
.band{background:var(--ink);color:var(--ivory)}
.band .lede{color:rgba(247,246,241,.72)}
.band .eyebrow{color:var(--champagne)}
.paper{background:var(--paper)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,104px);align-items:center}
.cta-row{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;margin-top:40px}
.centre .cta-row{justify-content:center}

/* ---------- hero ---------- */
/*
 * Drawn as app.priahq.com draws its page (site 1.4.0, Paul, 29 September
 * 2026): the brand on ink beside the product on ivory, split where that page
 * splits. The sentence sits on the ink, with the sign-in pages' ripples and a
 * breath of grain; one phone stands on the ivory, on a shallow stone plinth,
 * with nothing floating over it and nothing pointing at it. The split runs up
 * under the header (73px: its 72 and its rule), which lies over it.
 */
:root{--split:max(380px,41.6667vw)}
.hero{padding:0 0 clamp(28px,3.5vw,44px)}
.hero-split{display:grid;grid-template-columns:var(--split) minmax(0,1fr);min-height:min(100vh,900px);margin-top:-73px}
.hero-brand{
  position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;color:var(--ivory);
  padding:calc(73px + clamp(40px,5vw,72px)) clamp(32px,5vw,64px) clamp(48px,6vw,88px);
  background:radial-gradient(120% 80% at 110% 110%,rgba(30,77,67,.95) 0%,rgba(30,77,67,0) 60%),radial-gradient(90% 70% at -10% -10%,#1B3033 0%,#142628 70%);
}
.hero-brand::after,.page-head::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-ripples{position:absolute;right:-240px;top:-240px;width:640px;height:640px;z-index:-1;opacity:.55;pointer-events:none}
.hero-ripples circle{fill:none;stroke:var(--brass);stroke-width:1}
.hero-words{max-width:34rem}
.hero h1{font-weight:300;font-size:clamp(2.6rem,4vw,3.9rem);letter-spacing:-.02em}
.hero h1 em{font-style:italic;color:var(--champagne)}
.tagline{font-family:var(--serif);font-weight:300;font-size:clamp(1.25rem,1.8vw,1.55rem);line-height:1.35;margin-top:28px;max-width:28rem}
.hero .lede{margin-top:20px;font-size:1.02rem;max-width:30rem;color:rgba(247,246,241,.72)}
.btn-light{background:var(--ivory);color:var(--ink)}
.btn-light:hover{background:var(--champagne)}
.app-line{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:24px;font-size:.92rem;color:rgba(247,246,241,.72)}
.app-line img{display:block;height:40px;width:auto}

/*
 * No panel behind the phone. A coloured block is a second object competing
 * with the only one that matters, so what is behind it is the page: a shallow
 * stone plinth for the phone to stand on and the shadow it casts.
 */
.hero-stage{position:relative;display:grid;place-items:center;padding:calc(73px + clamp(20px,3vw,44px)) clamp(20px,4vw,56px) clamp(20px,3vw,44px)}
.plinth{
  position:absolute;left:50%;bottom:clamp(18px,4vw,52px);transform:translateX(-50%);
  width:min(420px,78%);height:120px;border-radius:14px;
  background:linear-gradient(170deg,#F1EEE6 0%,#E8E2D6 100%);
}
.plinth::after{
  content:'';position:absolute;left:50%;bottom:-14px;transform:translateX(-50%);
  width:86%;height:44px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(20,38,40,.16),transparent 72%);
}
.hero-stage .phone{position:relative;z-index:1}

/* Three things a school gets, at the foot of the first screen — close enough
   to the composition above to belong to it. */
.benefits{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  margin:clamp(20px,2.4vw,32px) 0 0;padding:clamp(20px,2.2vw,28px) 0 0;
  border-top:1px solid var(--line);text-align:center;
}
.benefits li{padding:0 20px}
.benefits li + li{border-inline-start:1px solid var(--line)}
.benefits b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.15rem,1.8vw,1.4rem)}
.benefits span{display:block;margin-top:6px;font-size:.92rem;color:var(--muted)}

/* ---------- the phone ---------- */
.phone{
  width:min(330px,100%);background:#1a1f1e;border-radius:44px;padding:9px;
  box-shadow:0 2px 6px rgba(20,38,40,.12),0 44px 80px -36px rgba(20,38,40,.45);
}
.phone-screen{background:var(--paper);border-radius:36px;overflow:hidden;display:flex;flex-direction:column;min-height:560px}
.phone-status{display:flex;align-items:center;justify-content:space-between;padding:12px 22px 2px;font-size:.72rem;font-weight:600}
.phone-notch{width:74px;height:20px;border-radius:999px;background:#1a1f1e}
.phone-bars{font-size:.6rem;letter-spacing:-1px;color:var(--ink)}
.phone-head{text-align:center;padding:10px 0 12px}
.phone-mark{font-family:var(--serif);font-size:1.18rem;letter-spacing:-.01em}
.phone-body{flex:1;padding:0 14px 14px;display:grid;gap:12px;align-content:start}
.msg-row{display:flex;align-items:flex-start;gap:8px;justify-content:flex-end}
.msg-you{background:#E4EDE6;border-radius:14px 14px 4px 14px;padding:10px 13px;font-size:.86rem;line-height:1.4;max-width:78%}
.msg-avatar{flex:none;width:26px;height:26px;border-radius:50%;background:#DCD7CB;color:var(--ink);font-size:.62rem;font-weight:600;display:grid;place-items:center}
.msg-pria{display:flex;gap:10px;background:var(--ivory);border-radius:16px;padding:13px 14px}
.msg-leaf{flex:none;width:26px;height:26px;border-radius:50%;background:#E4EDE6;color:var(--forest);font-size:.76rem;display:grid;place-items:center}
.msg-lead{font-size:.88rem;font-weight:600;line-height:1.4}
.msg-more{margin-top:7px;font-size:.84rem;line-height:1.45;color:var(--muted)}
.msg-sources{border:1px solid var(--line-soft);border-radius:14px;padding:12px 13px}
.msg-sources-head{display:flex;justify-content:space-between;font-size:.78rem;font-weight:600;margin-bottom:9px}
.src{display:flex;align-items:center;gap:10px;padding:5px 0}
.src-icon{flex:none;width:22px;height:22px;border-radius:6px;background:var(--ivory);color:var(--muted);font-size:.68rem;display:grid;place-items:center}
.src b{display:block;font-size:.78rem;font-weight:600}
.src i{display:block;font-style:normal;font-size:.68rem;color:var(--muted)}
.msg-flag{display:flex;align-items:center;gap:8px;font-size:.75rem;color:var(--muted);padding:2px 2px 0}
.msg-flag span{color:var(--brass);font-size:.6rem}
.phone-ask{display:flex;align-items:center;gap:10px;margin:0 12px 14px;background:var(--ivory);border-radius:999px;padding:9px 9px 9px 16px;font-size:.82rem;color:var(--muted)}
.phone-ask span:first-child{flex:1}
.phone-send{flex:none;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--ivory);display:grid;place-items:center;font-size:.85rem}
/* The families phone is the hero's phone. It was widened to give the chat room
   and came out fatter than the one above it, which reads as a different
   device; the room comes from inside instead. */
.phone-sm .phone-screen{min-height:0}
.phone-sm .phone-head{padding:16px 0 14px}
.phone-sm .phone-body{padding:0 16px 20px;gap:14px}
.phone-sm .msg-you{font-size:.88rem;line-height:1.5;padding:12px 15px;max-width:88%}
.phone-sm .msg-pria{padding:15px 15px;gap:11px}
.phone-sm .msg-lead{font-size:.9rem;line-height:1.45}
.phone-sm .msg-more{margin-top:8px;font-size:.85rem;line-height:1.55}
.phone-sm .msg-flag{padding-top:2px;font-size:.76rem}

/* ---------- why Pria: the gathering ---------- */
/*
 * One dark section, scrolled through rather than read down.
 *
 * site.js writes --p, nought when the section's top reaches the viewport and
 * one when its bottom does, and measures where the word "together" actually
 * sits. Each pill travels from its own --x/--y to that point, shrinking as it
 * arrives and going out underneath the sentence — the information is absorbed
 * into the word, rather than gathering politely around it.
 *
 * --d staggers them a little so they do not all vanish on the same frame.
 */
.gather{position:relative;height:340vh}
.gather-sticky{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.gather-inner{position:relative;width:100%;text-align:center}
.gather-field{position:absolute;inset:0;pointer-events:none;z-index:1}
.gp{
  --lead:calc(var(--d,0) * 0.16);
  --pp:clamp(0,calc((var(--p,0) - var(--lead)) / (1 - var(--lead))),1);
  /* Where this pill starts. The page writes --x and --y inline, and an inline
     style cannot be overridden by a rule — so the transform reads these
     instead, and a media query can give a phone a composition of its own
     (4.226.2). */
  --mx:var(--x);
  --my:var(--y);
  position:absolute;left:50%;top:50%;white-space:nowrap;
  font-size:.68rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(247,246,241,.78);
  border:1px solid rgba(247,246,241,.22);border-radius:999px;
  background:rgba(247,246,241,.04);padding:8px 16px;
  transform:
    translate(-50%,-50%)
    translate(calc(var(--mx) * (1 - var(--pp)) + var(--tx,0px) * var(--pp)),
              calc(var(--my) * (1 - var(--pp)) + var(--ty,0px) * var(--pp)))
    scale(calc(1 - var(--pp) * 0.78));
  opacity:clamp(0,calc((0.9 - var(--pp)) * 4),1);
  will-change:transform,opacity;
}
/* A long label should not become a banner. */
.gp:nth-child(n+14){letter-spacing:.09em}

/* The two lines share one cell, so the second arrives exactly where the first
   was and the word is in the place the pills have been travelling towards. */
.gather-lines{position:relative;z-index:2;display:grid}
.gather-lines > *{grid-area:1 / 1;margin:0}
.gather-heading{color:var(--ivory);opacity:var(--head-o,1)}
.resolve{
  font-family:var(--serif);font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.2;color:var(--ivory);
  opacity:var(--line-o,0);align-self:center;
}
.resolve em{font-style:italic;color:var(--champagne)}

/* Without the script, and without motion: the pills sit quietly around a
   sentence that is already there, and nothing travels. */
:root:not(.js) .gather,.gather.still{height:auto}
:root:not(.js) .gather-sticky,.gather.still .gather-sticky{position:static;height:auto;padding:clamp(72px,9vw,120px) 0}
:root:not(.js) .gather-field,.gather.still .gather-field{position:static;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:40px}
:root:not(.js) .gp,.gather.still .gp{position:static;transform:none;opacity:.55}
:root:not(.js) .gather-heading,.gather.still .gather-heading{display:none}
:root:not(.js) .resolve,.gather.still .resolve{opacity:1}

/* ---------- families ask ---------- */
.asks{list-style:none;margin:36px 0 0;padding:0;border-top:1px solid var(--line)}
.asks li{font-family:var(--serif);font-size:clamp(1.25rem,2vw,1.55rem);padding:18px 0;border-bottom:1px solid var(--line)}
.pledge{margin-top:36px;padding-left:20px;border-left:2px solid var(--brass);font-size:1.08rem;max-width:30rem}
.askbox{border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px -44px rgba(20,38,40,.4)}

/* ---------- for schools: the band, and the report inside it ---------- */
.schools-head{max-width:46rem}

/* Air, but not a band of it. 4.224.2 gave the columns the room the removed
   paragraph had been taking; at full width that read as a gap rather than as
   breathing room, and the headline and the insights under it stopped looking
   like one thought (4.226.2). About a fifth less, and less again on a phone,
   where the section was reading as three separate pages. */
.threes{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:clamp(40px,5.8vw,84px)}
.threes > div{padding:0 clamp(20px,2.4vw,34px)}
.threes > div:first-child{padding-inline-start:0}
.threes > div:last-child{padding-inline-end:0}
.threes > div + div{border-inline-start:1px solid rgba(247,246,241,.16)}
.threes h3{color:var(--ivory);font-size:1.32rem;line-height:1.25}
.threes p{margin-top:12px;color:rgba(247,246,241,.72);font-size:.98rem;line-height:1.6}

/*
 * The leadership report, as a screen on a surface.
 *
 * It was a pale panel of pale boxes on a pale page, which read as a diagram
 * rather than as a product. It is the section now: a dark bezel, a warm stone
 * surface under it, a real shadow, and the console's own chrome around the
 * page so it reads as something somebody is looking at. Cropped mid-thought,
 * because a page carries on below the fold and a screenshot that stops neatly
 * at its own edge looks composed for the advert.
 *
 * Drawn rather than photographed: enough to see that it reads like a briefing,
 * not enough to rebuild it from.
 */
.lead-sec{background:linear-gradient(180deg,var(--ivory) 0%,#F1EDE4 100%);padding-bottom:0}
.lead-lede{margin-top:20px;max-width:38rem;font-size:1.12rem;color:var(--ink);opacity:.78}
.eyebrow.with-rule{display:flex;align-items:center;gap:16px}
.eyebrow.with-rule::after{content:'';height:1px;width:clamp(60px,10vw,140px);background:var(--line)}


/*
 * The laptop the leadership report sits on.
 *
 * A Head reads this report at a desk, and a flat panel floating on the page
 * said "screenshot" where the section wanted to say "product". Drawn in CSS
 * rather than dropped in as an image so it takes the page's own palette,
 * stays sharp at any size and costs nothing to load.
 *
 * Proportions are the point. The bezel is thin on three sides with a deeper
 * chin, which is what a modern laptop looks like and what keeps it from
 * reading as a television; the base is a little wider than the lid, as it is
 * on a real one, and the hinge is the sliver of shadow between them.
 */
/* Closer to the insights above it: headline, then three of them, then the
   proof — one rhythm rather than three things stacked (4.226.2). */
.laptop{margin:clamp(30px,3.8vw,56px) auto 0;max-width:1000px}
.laptop-lid{
  position:relative;background:#14181a;border-radius:15px;padding:11px 11px 20px;
  box-shadow:0 2px 4px rgba(20,38,40,.14),0 54px 84px -42px rgba(20,38,40,.5);
}
/* The camera, in the chin's own colour rather than a bright dot. */
.laptop-lid::after{
  content:'';position:absolute;left:50%;bottom:8px;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:rgba(247,246,241,.16);
}
.laptop-screen{
  position:relative;
  background:var(--ivory);color:var(--ink);border-radius:5px;overflow:hidden;
  aspect-ratio:16/10.4;
  /* Where the screen stops being readable. The report keeps its month, its
     figures and the summary; the Overview keeps its greeting, its figures and
     the heading over the work. Below those the interface is still there and
     no longer legible (4.224.4). */
  --b1:70%;--b2:79%;--b3:87%;--b4:94%;
}
.laptop-screen.gentle{--b1:50%;--b2:64%;--b3:78%;--b4:90%}

/*
 * The softening, inside the screen and nowhere else.
 *
 * It was a mask fading the page to transparent, which took the lower content
 * away and showed the lid's black through it — a fade, where what was wanted
 * was a blur: the interface still there, still clearly an interface, and not
 * readable. A mask cannot do that, so this is four layers of backdrop blur
 * stacked over the content, each starting lower and blurring harder, each
 * eased in by its own gradient so no edge of any of them is visible.
 *
 * Inside .laptop-screen, which clips to its own rounded corners, so none of
 * it touches the bezel or the page behind.
 */
.screen-fade{position:absolute;inset:0;pointer-events:none}
.screen-fade i{position:absolute;inset-inline:0;bottom:0;display:block;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 55%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 55%)}
.screen-fade i:nth-child(1){top:var(--b1);-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px)}
.screen-fade i:nth-child(2){top:var(--b2);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.screen-fade i:nth-child(3){top:var(--b3);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.screen-fade i:nth-child(4){top:var(--b4);-webkit-backdrop-filter:blur(17px);backdrop-filter:blur(17px)}
/* And the faintest wash at the very bottom, so the screen ends rather than
   being cut off square by the overflow. Ivory, the screen's own colour. */
.screen-fade::after{content:'';position:absolute;inset-inline:0;bottom:0;height:26%;
  background:linear-gradient(to bottom,rgba(247,246,241,0),rgba(247,246,241,.55))}
/* The base, wider than the lid and tapering, with the thumb notch in it. */
.laptop-base{
  position:relative;width:107%;margin:0 -3.5%;height:13px;
  background:linear-gradient(180deg,#e4e7e6 0%,#c3c8c7 42%,#9aa1a0 100%);
  border-radius:0 0 11px 11px;
  clip-path:polygon(0 0,100% 0,98.4% 100%,1.6% 100%);
  box-shadow:0 18px 26px -18px rgba(20,38,40,.45);
}
.laptop-base::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:clamp(70px,9%,112px);height:6px;border-radius:0 0 7px 7px;
  background:rgba(20,38,40,.16);
}
@media (max-width:720px){
  .laptop-lid{border-radius:11px;padding:7px 7px 15px}
  .laptop-screen{aspect-ratio:16/13}
  .laptop-base{height:10px}
}

/* The console around the page. */
.app-bar{display:flex;align-items:center;gap:clamp(16px,2.4vw,34px);padding:14px clamp(18px,2.2vw,28px);
  border-bottom:1px solid var(--line-soft);background:var(--paper)}
.app-mark{font-family:var(--serif);font-size:1.12rem;display:flex;align-items:baseline;gap:4px}
.app-mark sup{font-family:var(--sans);font-size:.42rem;font-weight:600;letter-spacing:.18em;color:var(--brass)}
.app-tabs{display:flex;gap:clamp(10px,1.5vw,22px);font-size:.78rem;color:var(--muted);overflow:hidden}
.app-tabs .on{color:var(--ink);font-weight:600;border-bottom:2px solid var(--ink);padding-bottom:3px}
.app-user{display:flex;align-items:center;gap:8px;margin-inline-start:auto;flex:none}
.app-user i{width:26px;height:26px;border-radius:50%;background:#DCD7CB;font-style:normal;font-size:.62rem;
  font-weight:600;display:grid;place-items:center}
.app-user b{font-size:.76rem;font-weight:600}
.app-user u{font-size:.66rem;color:var(--muted);text-decoration:none;margin-inline-start:-4px}
@media (max-width:860px){.app-user b,.app-user u{display:none}}

.app-body{padding:clamp(20px,2.4vw,32px) clamp(18px,2.2vw,32px) 0}
.app-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.app-month{font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:8px 12px;
  display:inline-flex;gap:10px;align-items:center;background:var(--paper);flex:none}
.rs-eyebrow{font-size:.64rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.rs-month{font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,1.95rem);line-height:1.15;margin-top:6px}

.rs-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.rs-kpis.five{grid-template-columns:repeat(5,1fr);gap:10px}
.rs-kpis .warm{background:color-mix(in srgb,var(--champagne) 26%,var(--paper));border-color:color-mix(in srgb,var(--champagne) 70%,var(--paper))}

/* The Overview's own section heading, inside the frame. */
.app-section{font-family:var(--serif);font-size:1.1rem;margin:20px 0 10px}
.improve-tile{display:flex;align-items:center;gap:12px;background:var(--paper);
  border:1px solid var(--line-soft);border-radius:14px;padding:14px 16px}
.improve-tile .tile-icon{flex:none;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:.85rem}
.improve-tile .tile-icon.warm{background:#f6edd9;color:#7a5a1c}
.improve-tile .tile-icon.green{background:#e2ece5;color:var(--forest)}
.improve-tile .tile-icon.blue{background:#e6edf2;color:#38596b}
.improve-tile b{display:block;font-family:var(--serif);font-weight:500;font-size:1.4rem;line-height:1.05}
.improve-tile i{display:block;font-style:normal;font-size:.78rem;font-weight:600;margin-top:2px}

.rs-kpis > div{background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:15px 16px 17px}
.rs-kpis b{display:block;font-family:var(--serif);font-weight:500;font-size:1.85rem;line-height:1.04}
.rs-kpis span{display:block;margin-top:5px;font-size:.82rem;font-weight:600}
.rs-kpis u{display:block;margin-top:4px;font-size:.68rem;color:var(--muted);text-decoration:none}
.rs-kpis i{font-style:normal;font-weight:600}
.rs-kpis i.dn{color:#8a3a46}
.rs-summary{background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:20px 22px;margin-top:14px}
.rs-summary h4{font-family:var(--serif);font-weight:400;font-size:1.25rem;margin:0 0 10px}
.rs-summary p{font-size:.9rem;line-height:1.6;color:var(--muted)}
.rs-summary p + p{margin-top:10px}
.rs-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
/* Two of them, filling the width. The report's rows come in threes; the
   Overview's come in twos since it stopped showing Sources due for review and
   Unread chats, and two children in a three-column grid left the right third
   of the screen empty (4.224.3). */
.rs-cols.two-up{grid-template-columns:repeat(2,1fr)}
.rs-cols > div{background:var(--paper);border:1px solid var(--line-soft);border-radius:14px;padding:16px 18px}
.rs-cols h5{font-size:.8rem;font-weight:600;margin:0 0 8px}
.rs-cols p{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;
  border-top:1px solid var(--line-soft);font-size:.82rem}
.rs-cols p:first-of-type{border-top:0}
.rs-cols b{font-variant-numeric:tabular-nums;flex:none}
.rs-cols span{color:var(--muted)}
.rs-lower{grid-template-columns:1.25fr .75fr}
.rs-lower .bar{flex:1;height:7px;border-radius:999px;background:var(--line-soft);position:relative;margin:0 4px}
.rs-lower .bar::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:999px;background:var(--forest);opacity:.75}

/* ---------- one school, one answer ---------- */
.says-wrap{max-width:440px;margin-left:auto;width:100%}
.says{display:grid;gap:12px}
.say{display:flex;justify-content:space-between;align-items:baseline;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 24px}
.say span{color:var(--muted);font-size:.98rem}
.say b{font-family:var(--serif);font-weight:400;font-size:1.7rem}
.say:nth-child(2){margin-left:24px}
.say:nth-child(3){margin-left:48px;opacity:.7}
.spotted{margin:16px 0 0 48px;display:flex;gap:12px;align-items:baseline;font-size:1rem}
.spotted i{width:8px;height:8px;border-radius:50%;background:var(--brass);flex:none;transform:translateY(-1px)}

/* ---------- relationships: the brand, said once and large ---------- */
.heart{background:var(--forest);color:var(--ivory)}
.heart h2{font-size:clamp(2.3rem,5vw,3.9rem);max-width:17ch;margin:0 auto}
.heart p{margin:32px auto 0;max-width:36rem;font-size:1.15rem;color:rgba(247,246,241,.8)}
.line{font-family:var(--serif);font-style:italic;font-size:clamp(1.4rem,2.6vw,1.9rem);color:var(--champagne);margin-top:48px!important}

/* ---------- trust ---------- */
.trust-list{list-style:none;margin:0;padding:0;border-top:1px solid rgba(247,246,241,.16)}
.trust-list li{padding:18px 0 18px 32px;border-bottom:1px solid rgba(247,246,241,.16);position:relative;font-size:1.06rem}
.trust-list li::before{content:"";position:absolute;left:4px;top:1.7em;width:12px;height:1px;background:var(--brass)}
.band .quiet{color:var(--ivory)}

/* ---------- close ---------- */
.close h2{font-size:clamp(2.2rem,4.8vw,3.7rem);max-width:20ch;margin:0 auto}
.close .line{margin-top:32px!important}
.band .btn-ink{background:var(--ivory);color:var(--ink)}
.band .btn-ink:hover{background:var(--champagne)}

/*
 * Trust sits on pale sage-stone rather than on the ink: a section about being
 * trusted should feel calm and lit, and the page keeps its darkest moment for
 * the sentence it closes on.
 */
.sec.band.trust-sec{background:#EEF2EC;color:var(--ink)}
.trust-sec .eyebrow{color:var(--forest)}
.trust-sec h2{color:var(--ink)}
.trust-sec .trust-list{border-top-color:rgba(20,38,40,.16)}
.trust-sec .trust-list li{border-bottom-color:rgba(20,38,40,.16);color:var(--ink)}
.trust-sec .trust-list li::before{background:var(--forest)}

footer{padding:48px 0 56px;font-size:.92rem;color:var(--muted);border-top:1px solid var(--line-soft)}
.foot-in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:baseline}
.foot-in nav{display:flex;flex-wrap:wrap;gap:12px 28px}
.foot-in nav a{text-decoration:none}
.foot-in nav a:hover{color:var(--ink)}

/* ---------- the trust page ---------- */
/* Every other page opens as the home page does (site 1.4.0): on the same ink,
   with the same ripples and grain, all the way across and up under the header. */
.page-head{
  position:relative;overflow:hidden;isolation:isolate;color:var(--ivory);margin-top:-73px;
  padding:calc(73px + clamp(56px,8vw,112px)) 0 clamp(48px,6vw,80px);
  background:radial-gradient(120% 80% at 110% 110%,rgba(30,77,67,.95) 0%,rgba(30,77,67,0) 60%),radial-gradient(90% 70% at -10% -10%,#1B3033 0%,#142628 70%);
}
.page-head::before{
  content:'';position:absolute;right:-240px;top:-240px;width:640px;height:640px;z-index:-1;opacity:.55;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 620' fill='none' stroke='%23B08D57'%3E%3Ccircle cx='310' cy='310' r='60'/%3E%3Ccircle cx='310' cy='310' r='120' opacity='.83'/%3E%3Ccircle cx='310' cy='310' r='180' opacity='.66'/%3E%3Ccircle cx='310' cy='310' r='240' opacity='.49'/%3E%3Ccircle cx='310' cy='310' r='300' opacity='.32'/%3E%3C/svg%3E") no-repeat center/contain;
}
.page-head .eyebrow{color:var(--champagne)}
.page-head h1{font-size:clamp(2.4rem,5vw,3.8rem);font-weight:300;letter-spacing:-.02em;max-width:18ch}
.page-head .lede,.page-head .legal-meta{color:rgba(247,246,241,.72)}
.tenets{display:grid;grid-template-columns:1fr 1fr;gap:56px 72px}
.tenet{border-top:1px solid var(--ink);padding-top:22px}
.tenet p{margin-top:12px;color:var(--muted)}

/* One movement, used everywhere: things arrive gently, once. */
/* Hidden only once the script has said it is there to reveal them: a page
   whose script never arrives must still be a page. */
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rise{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

@media (max-width:1023px){
  .top nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--ivory);border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:8px 28px 20px}
  .top nav.open{display:flex}
  .top nav a{padding:14px 0;border-bottom:1px solid var(--line-soft)}
  .menu-toggle{display:block}
  .top .btn{display:none}
  .pillars{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){
  .threes{grid-template-columns:1fr;gap:36px}
  .ov-kpis{grid-template-columns:repeat(2,1fr)}
  .ov-improve,.ov-cols{grid-template-columns:1fr}
  .shot{max-height:540px}
  .threes > div{padding:0}
  .threes > div + div{border-inline-start:0;border-top:1px solid rgba(247,246,241,.16);padding-top:36px}
  .rs-kpis,.rs-kpis.five{grid-template-columns:repeat(2,1fr)}
  .rs-cols,.rs-cols.two-up{grid-template-columns:1fr}
  .device{border-radius:14px 14px 0 0;padding:10px 10px 0}
  .device-screen{max-height:none}
  .app-tabs{display:none}
}
@media (max-width:820px){
  body{font-size:16px}
  .wrap{padding:0 16px}
  .split,.hero .split{grid-template-columns:1fr}
  .benefits{grid-template-columns:1fr;gap:26px;text-align:start}
  .benefits li{padding:0}
  .benefits li + li{border-inline-start:0;border-top:1px solid var(--line-soft);padding-top:26px}

  /* The hero, sooner. The lede was set for a column twice this wide, so on a
     phone it ran to eight lines and pushed the product below the fold
     (4.226.2). Tighter leading, less room around it, and the phone comes up
     to meet it. The headline is untouched: it is the one thing that should
     still be large here. */
  .hero{padding:0 0 clamp(20px,3.5vw,32px)}
  .hero .lede{margin-top:14px;line-height:1.45}

  /* Three statements, not three paragraphs. */
  .benefits{gap:16px}
  .benefits li + li{padding-top:16px}
  .benefits span{margin-top:3px}

  /* The questions, closer together, and the phone under them sooner. */
  .asks{margin-top:22px}
  .asks li{padding:12px 0}
  .pledge{margin-top:22px}
  .split{gap:26px}

  /* For schools: one section, not three pages. The headline, the three
     insights and the proof were a screen apart from each other. */
  /* 46px, from the 64 it was: the 25-30% asked for rather than the 59% a
     first pass took off, which closed it up more than the section wanted. */
  .threes{margin-top:46px;gap:0}
  .threes > div{padding:0}
  .threes > div + div{border-inline-start:0;border-top:1px solid rgba(247,246,241,.16);padding-top:20px;margin-top:20px}
  .threes p{margin-top:8px}

  /*
   * The gathering, composed for a phone rather than scaled down to one.
   *
   * The desktop field puts pills out to ±43vw and level with the sentence,
   * which on a narrow screen means half of them are off the edge and the rest
   * are on top of the words. So the places are its own: ten bands, one pill
   * a side, none of them within 14vh of the middle where the headline sits,
   * and every one inside the viewport by measurement.
   *
   * The *motion* is the desktop's, which 4.226.2 replaced and should not have.
   * Each pill crossed on its own for a fifth of the scroll and faded a third
   * of the way over, so three or four were ever on screen and none of them was
   * seen to arrive: a phone got a different idea rather than a tighter one.
   * They travel the whole way into the word again here, and go out underneath
   * it as they land, exactly as they do on a wide screen (4.231.0).
   *
   * What is tighter is how many are waiting at the start and how long each
   * takes. Ten are already there when the section arrives, so it reads as busy
   * rather than as empty; the other ten fade in across the middle third as the
   * first ten are drawn in, so something is always moving inward and the field
   * thins rather than emptying. --span is the crossing, half the scroll, which
   * puts the first arrivals at a little past halfway - after the sentence they
   * are arriving into has appeared, and with room for the last of them to land
   * before the section ends.
   */
  .gp{
    font-size:.64rem;letter-spacing:.09em;padding:6px 11px;
    --lead:0;
    /* The crossing, rather than "whatever is left of the scroll": every pill
       takes the same time to travel, so the ones that start later are still
       arriving when the early ones have gone. */
    --span:.5;
    --pp:clamp(0,calc((var(--p,0) - var(--lead)) / var(--span)),1);
    /* Full at its own moment, drawn up over the 7% before it. A pill whose
       moment is nought is simply there from the start. */
    --in:clamp(0,calc((var(--p,0) - var(--lead)) / .07 + 1),1);
    opacity:min(clamp(0,calc((0.9 - var(--pp)) * 4),1),var(--in));
  }
  .gp:nth-child(n+14){letter-spacing:.075em}
  .gp:nth-child(1){--mx:-25vw;--my:-28vh;--lead:.012;--span:.42}
  .gp:nth-child(2){--mx:-22vw;--my:-35vh;--lead:.19}
  .gp:nth-child(3){--mx:-26vw;--my:14vh;--lead:.31}
  .gp:nth-child(4){--mx:27vw;--my:14vh;--lead:.000;--span:.42}
  .gp:nth-child(5){--mx:25vw;--my:-14vh;--lead:.28}
  .gp:nth-child(6){--mx:26vw;--my:28vh;--lead:.025;--span:.42}
  .gp:nth-child(7){--mx:-26vw;--my:-42vh;--lead:.000;--span:.42}
  .gp:nth-child(8){--mx:26vw;--my:-21vh;--lead:.018;--span:.42}
  .gp:nth-child(9){--mx:27vw;--my:-35vh;--lead:.006;--span:.42}
  .gp:nth-child(10){--mx:-26vw;--my:21vh;--lead:.012;--span:.42}
  .gp:nth-child(11){--mx:-27vw;--my:-14vh;--lead:.025;--span:.42}
  .gp:nth-child(12){--mx:25vw;--my:21vh;--lead:.34}
  .gp:nth-child(13){--mx:26vw;--my:35vh;--lead:.40}
  .gp:nth-child(14){--mx:-24vw;--my:28vh;--lead:.37}
  .gp:nth-child(15){--mx:19vw;--my:-42vh;--lead:.16}
  .gp:nth-child(16){--mx:-24vw;--my:35vh;--lead:.006;--span:.42}
  .gp:nth-child(17){--mx:20vw;--my:-28vh;--lead:.22}
  .gp:nth-child(18){--mx:-23vw;--my:42vh;--lead:.43}
  .gp:nth-child(19){--mx:25vw;--my:42vh;--lead:.018;--span:.42}
  .gp:nth-child(20){--mx:-24vw;--my:-21vh;--lead:.25}
  .split .visual{order:2}
  .caps,.ways,.tenets{grid-template-columns:1fr}
  .says-wrap{margin:0 auto}
  .say:nth-child(2),.say:nth-child(3),.spotted{margin-left:0}
  .cap-shot{height:auto;min-height:120px;padding:16px}
  .cap-shot.top{padding:0}
  .day li{grid-template-columns:84px 1fr;gap:16px}
}
@media (max-width:560px){
  .pillars{grid-template-columns:1fr;gap:36px}
}

/* ===========================================================================
   Footer: the wordmark and line, then four things (About, Privacy Policy,
   the address, Instagram) on one quiet row.
   =========================================================================== */
.foot-in nav{align-items:center}
.foot-social{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border:1px solid var(--line);border-radius:50%;color:var(--muted);text-decoration:none}
.foot-social:hover{color:var(--ink);border-color:rgba(20,38,40,.3)}
@media (max-width:820px){
  .foot-in{flex-direction:column;align-items:flex-start;gap:20px}
  .foot-in nav{gap:12px 22px}
}

/* ===========================================================================
   For Families on a phone: the phone is the centre of the section, and the
   reassurance sits under it. On a wide screen it stays beside the questions.
   =========================================================================== */
.pledge-under{display:none}
@media (max-width:820px){
  #families .visual{display:flex;flex-direction:column;align-items:center}
  #families .pledge-over{display:none}
  /* The gold rule turned on its side: a short line above, centred with the
     text under a centred phone, rather than a left border beside it. */
  #families .pledge-under{display:block;margin:30px auto 0;padding:18px 0 0;border:0;max-width:26rem;
    text-align:center;position:relative;font-size:1.02rem;color:var(--ink)}
  #families .pledge-under::before{content:'';position:absolute;top:0;left:50%;width:44px;height:2px;
    margin-left:-22px;background:var(--brass)}
}

/* ===========================================================================
   The benefits on a phone: one row, one at a time, moving on by itself
   (site.js). Same type as before and no cards; the row is one statement tall
   instead of three.
   =========================================================================== */
.benefits .benefit-clone{display:none}
.benefits-marks{display:none}
@media (max-width:820px){
  .benefits{display:flex;grid-template-columns:none;gap:0;overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    text-align:center;padding-top:18px}
  .benefits::-webkit-scrollbar{display:none}
  .benefits li,.benefits li + li{flex:0 0 100%;scroll-snap-align:center;padding:0 12px;border:0;margin:0}
  .benefits .benefit-clone{display:block}
  /* While site.js carries it along, snapping would fight every frame. */
  .benefits.gliding{scroll-snap-type:none}
  /* Where it is, barely: three hairlines, the current one a shade darker. */
  .benefits-marks{display:flex;justify-content:center;gap:6px;margin-top:14px}
  .benefits-marks i{width:16px;height:1px;background:var(--line);transition:background .6s ease}
  .benefits-marks i.on{background:var(--muted)}
}

/* ===========================================================================
   About.
   =========================================================================== */
.about-head h1{max-width:20ch}
.about-lede{margin-top:28px;max-width:38rem}
.about-cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,104px);align-items:start}
.about-prose p{font-size:1.15rem;line-height:1.65;color:var(--muted)}
.about-prose p + p{margin-top:20px}
.about-hold{padding-top:0}
.about-list{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.about-list li{font-family:var(--serif);font-size:clamp(1.3rem,2.2vw,1.65rem);padding:20px 0;border-bottom:1px solid var(--line)}
.about-close h2{max-width:20ch;margin:0 auto}
.about-close em{font-style:italic;color:var(--forest)}
@media (max-width:820px){
  .about-cols{grid-template-columns:1fr;gap:24px}
}

/* ===========================================================================
   Privacy Policy: long text, read comfortably. One column, numbered headings,
   room between paragraphs, nothing decorative.
   =========================================================================== */
.legal-head h1{max-width:none}
.legal-meta{margin-top:14px;color:var(--muted);font-size:.95rem}
.legal{padding:clamp(48px,6vw,72px) 0 clamp(72px,9vw,120px)}
.legal-body{max-width:68ch}
.legal-notice{padding:16px 18px;border-radius:12px;background:var(--paper);border:1px solid var(--line-soft);font-size:1rem}
.legal-toc{margin-top:36px}
.legal-toc p{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.legal-toc ol{margin:12px 0 0;padding-left:1.3em;line-height:1.9}
.legal-toc a{text-decoration:none;border-bottom:1px solid var(--line)}
.legal-sec{margin-top:48px;scroll-margin-top:96px}
.legal-sec h2{font-size:clamp(1.45rem,2.4vw,1.8rem);line-height:1.25}
.legal-sec p{margin-top:14px;line-height:1.75}
.legal-sec p + p{margin-top:16px}
/* The policy itself (29 September 2026): the short version in the box at the
   top, then sub-headings, lists and the table of cookies, in the same measure
   and rhythm as its paragraphs. */
.legal-notice ul{margin:10px 0 0;padding-left:1.2em;line-height:1.7}
.legal-notice li + li{margin-top:6px}
.legal-sec h3{margin-top:24px;font-size:1.15rem;line-height:1.35}
.legal-sec ul{margin:14px 0 0;padding-left:1.3em;line-height:1.75}
.legal-sec li + li{margin-top:8px}
.legal-table-wrap{margin-top:16px;overflow-x:auto}
.legal-table{width:100%;min-width:560px;border-collapse:collapse;font-size:.95rem;line-height:1.55}
.legal-table th,.legal-table td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line-soft)}
.legal-table th{font-weight:600;border-bottom-color:var(--line)}
.legal-table code{font-size:.88em;white-space:nowrap}

/* A phone (site 1.4.0): the opening's ink as a band across the top, the header
   over it, and the phone under it on the ivory, as app.priahq.com stacks. */
@media (max-width:860px){
  .hero-split{grid-template-columns:minmax(0,1fr);min-height:0}
  .hero-brand{padding:calc(73px + 36px) 16px 48px}
  .hero-ripples{width:420px;height:420px;right:-170px;top:-170px}
  .hero-stage{padding:32px 16px 8px}
  .top.over.top-split .menu-toggle{color:var(--ivory);border-color:rgba(247,246,241,.3)}
  .page-head::before{width:420px;height:420px;right:-170px;top:-170px}
}