/* Ponder Help centre: static pages in the website's Direction B (deep teal) language. */
:root{
  --abyss:#061d23;--deep:#092b34;--deep2:#10353d;--teal:#2a8279;--teal-l:#63cbbb;--mint:#eaf3ee;--mint2:#d6ebe3;
  --coral:#f8a47b;--coral2:#fa9b73;--coral-l:#ffd3bc;--text:#e8f2ee;--muted:#a8c6be;--line:rgba(214,235,227,.13);--line2:rgba(214,235,227,.22);
  --glass:linear-gradient(180deg,rgba(26,72,82,.55),rgba(12,44,52,.55));
  --ff-d:'Outfit',system-ui,sans-serif;--ff-t:'DM Sans',system-ui,sans-serif;--ff-s:'Instrument Serif',Georgia,serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:radial-gradient(120% 70% at 50% -10%,#0f3d47 0%,var(--deep) 45%,var(--abyss) 100%) fixed var(--deep);color:var(--text);font:400 1.0625rem/1.62 var(--ff-t);-webkit-font-smoothing:antialiased;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--ff-d);font-weight:600;letter-spacing:-.02em;margin:0}
p{margin:0}
:focus-visible{outline:3px solid var(--coral-l);outline-offset:3px;border-radius:6px}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-60px;z-index:100;background:var(--coral);color:#10262b;padding:.6rem 1rem;border-radius:12px;font-weight:600;text-decoration:none}
.skip:focus{top:16px}
.wrap{width:min(1120px,100% - 32px);margin-inline:auto}
.s{font-family:var(--ff-s);font-style:italic;font-weight:400;color:var(--coral);letter-spacing:-.005em}

/* header */
.hnav{position:sticky;top:0;z-index:20;padding:12px 0}
.hnav-in{width:min(1120px,100% - 24px);margin-inline:auto;display:flex;align-items:center;gap:1rem;padding:.45rem .45rem .45rem 1rem;border-radius:999px;background:rgba(9,43,52,.72);border:1px solid var(--line);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.logo{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font:600 1.25rem/1 var(--ff-d);letter-spacing:-.03em}
.logo svg{width:24px;height:24px}
.hnav nav{margin-left:auto;display:flex;align-items:center;gap:.3rem}
.hnav nav a{text-decoration:none;padding:.55rem .8rem;border-radius:999px;color:var(--muted);font-size:.95rem}
.hnav nav a:hover{color:var(--text);background:rgba(234,243,238,.07)}
.hnav nav a.hbtn{background:linear-gradient(180deg,#ffb48f,var(--coral2));color:#10262b;font:600 .95rem/1 var(--ff-d);padding:.7rem 1rem}
@media (max-width:420px){.hnav nav a:not(.hbtn){padding:.55rem .5rem;font-size:.88rem}.hnav nav a.hbtn{padding:.65rem .8rem;font-size:.88rem}.logo{font-size:1.1rem}}

/* hero */
.hhero{padding:clamp(28px,6vw,72px) 0 clamp(24px,4vw,44px)}
.hhero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(20px,4vw,48px);align-items:center}
.kicker{font:500 .8rem/1 var(--ff-d);letter-spacing:.16em;text-transform:uppercase;color:var(--teal-l)}
.crumbs{display:flex;flex-wrap:wrap;gap:.5rem;font-size:.92rem;color:var(--muted)}
.crumbs a{color:var(--teal-l);text-underline-offset:3px}
.hhero h1{font-size:clamp(2.2rem,5.6vw,4rem);line-height:1.02;letter-spacing:-.035em;margin:.9rem 0 .9rem;max-width:880px}
.lede{color:var(--muted);font-size:clamp(1.05rem,1.4vw,1.2rem);max-width:680px}
.ctas{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.6rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:52px;padding:0 1.4rem;border-radius:999px;font:600 1rem/1 var(--ff-d);text-decoration:none;border:0}
.btn svg{width:18px;height:18px}
.btn-primary{background:linear-gradient(180deg,#ffb48f,var(--coral2));color:#10262b;box-shadow:0 14px 34px -12px rgba(250,155,115,.65),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-ghost{background:rgba(234,243,238,.06);color:var(--text);border:1px solid var(--line2)}
.btn-ghost:hover{background:rgba(234,243,238,.12)}
.note{margin-top:1.4rem;max-width:720px;padding:.9rem 1.1rem;border-radius:18px;background:rgba(248,164,123,.1);border:1px solid rgba(248,164,123,.3);color:var(--text);font-size:.98rem}
.note b{font-family:var(--ff-d);font-weight:600;color:var(--coral-l)}
.tipcard{display:flex;gap:14px;align-items:flex-start;padding:20px;border-radius:24px;background:var(--glass);border:1px solid var(--line)}
.tipcard img{width:64px;height:64px;flex:none;border-radius:50%;object-fit:cover;object-position:50% 12%;background:var(--mint2);border:2px solid var(--line2)}
.tipcard p{color:var(--muted)}
.tipcard b{color:var(--text);font-weight:600}
.q{display:inline-grid;place-items:center;width:1.6em;height:1.6em;border-radius:50%;background:#ffe39b;color:#17343a;font:700 .9em/1 var(--ff-d);vertical-align:.05em}

/* steps + screenshot */
.how{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;padding:clamp(20px,4vw,40px) 0}
.how h2,.related h2,.ghead h2{font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.1}
.how .sub{color:var(--muted);margin-top:.5rem}
.steps{list-style:none;counter-reset:s;margin:1.4rem 0 0;padding:0;display:grid;gap:12px}
.steps li{counter-increment:s;position:relative;padding:16px 18px 16px 64px;border-radius:20px;background:var(--glass);border:1px solid var(--line)}
.steps li::before{content:counter(s);position:absolute;left:16px;top:15px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:rgba(99,203,187,.16);border:1px solid rgba(99,203,187,.45);color:var(--mint);font:600 .95rem/1 var(--ff-d)}
.steps h3{font-size:1.12rem;margin-bottom:.25rem}
.steps p{color:var(--muted)}
.steps .tagline{margin-top:.4rem;font-size:.85rem;color:var(--coral-l)}
.shot{margin:0;position:sticky;top:96px;padding:12px;border-radius:26px;background:var(--glass);border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.shot img{border-radius:16px;width:100%;background:var(--mint)}
.shot--phone{max-width:340px;justify-self:center}
.shot figcaption{margin-top:10px;font-size:.88rem;color:var(--muted);text-align:center}
@media (max-width:860px){.how{grid-template-columns:1fr}.shot{position:static}.hhero-grid{grid-template-columns:1fr}}

/* cards */
.related,.group{padding:clamp(24px,4vw,44px) 0}
.ghead p{color:var(--muted);margin-top:.4rem;max-width:640px}
.cards{list-style:none;margin:1.2rem 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.hcard{position:relative;display:flex;flex-direction:column;gap:.5rem;padding:22px;border-radius:22px;background:var(--glass);border:1px solid var(--line)}
.hcard:hover{border-color:rgba(248,164,123,.4)}
.hcard h3{font-size:1.2rem;line-height:1.2}
.hcard h3 a{text-decoration:none}
.hcard h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.hcard p{color:var(--muted);font-size:.97rem}
.hcard .links{margin-top:auto;padding-top:.5rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem}
.hcard .links a{color:var(--teal-l);font-weight:600;font-family:var(--ff-d);text-underline-offset:3px}
.shot-link{display:block;border-radius:16px}
.pill{align-self:flex-start;font:600 .66rem/1 var(--ff-t);letter-spacing:.08em;text-transform:uppercase;padding:.4em .7em;border-radius:999px;background:rgba(248,164,123,.14);color:var(--coral-l);border:1px solid rgba(248,164,123,.3)}

/* footer */
.hfoot{margin-top:clamp(30px,6vw,70px);padding:34px 0 60px;border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
.hfoot a{color:var(--text);text-underline-offset:3px}
.hfoot .fine{margin-top:.6rem;font-size:.86rem;max-width:620px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}