/* Patra · inner pages (features, pricing, partners, switch, security, about, contact, sign in, more storage), the legal
   pages and the 404 page. Loaded after /site.css on those pages only, so the homepage keeps its weight budget. Tokens come
   from site.css. */
/* ---- blocks the homepage never uses (moved out of site.css) ---- */
/* page heroes */
.page-hero{padding-block:clamp(40px,24px + 3vw,72px) 32px;text-align:center}
.page-hero h1{max-width:16ch;margin:16px auto 0;font:600 clamp(2.5rem,1rem + 3.25vw,4rem)/1.04 var(--font-heading);letter-spacing:-.03em;text-wrap:balance}
.page-hero h1 .t2{display:block}
.page-hero .lead{max-width:640px;margin:20px auto 0}
.page-hero:has(+ .band-white),.page-hero:has(+ .subnav){padding-bottom:clamp(48px,32px + 3vw,88px)}

/* notes and the "need more" strip */
.notes{display:grid;gap:12px;max-width:1040px;margin:28px auto 0;color:var(--slate);font-size:15px;line-height:24px}
.notes li{position:relative;padding-left:20px}
.notes li::before{content:"";position:absolute;left:2px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--coral)}
.need-more{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;max-width:1040px;margin:32px auto 0;padding:24px;border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline)}
.need-more p{font-size:16px;line-height:24px}
.need-more b{font:600 18px/26px var(--font-heading);letter-spacing:-.01em}
@media (min-width:48em){.need-more{padding:24px 28px}}

/* legal pages */
.legal{width:min(760px,100% - 2*var(--gutter));margin-inline:auto;padding-block:clamp(32px,24px + 2vw,56px) clamp(64px,48px + 3vw,112px)}
.legal-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
.legal-nav a{display:inline-flex;color:var(--ink);align-items:center;min-height:40px;padding:0 14px;border-radius:var(--r-pill);background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline-2);font:500 14px/1 var(--font-body);text-decoration:none}
.legal-nav a:hover{box-shadow:inset 0 0 0 1px rgba(23,33,43,.3)}
.legal-nav a[aria-current=page]{background:var(--ink);color:var(--white);box-shadow:none;font-weight:600}
@media (forced-colors:active){.legal-nav a[aria-current=page]{outline:2px solid CanvasText;outline-offset:-4px}}
@media (any-pointer:coarse){.legal-nav a{min-height:44px}}
.legal h1{font:600 clamp(2rem,1.5rem + 1.6vw,2.75rem)/1.1 var(--font-heading);letter-spacing:-.025em}
.legal .meta{margin-top:12px;color:var(--slate);font-size:14px;line-height:20px}
.legal .lead{margin-top:16px}
.legal h2{margin:48px 0 12px;font:600 22px/30px var(--font-heading);letter-spacing:-.01em;scroll-margin-top:8px}
.legal h3{margin:24px 0 6px;font:600 16px/24px var(--font-body)}
.legal p,.legal li{font-size:16px;line-height:1.7}
.legal p{margin-bottom:16px}
.legal ul,.legal ol{margin:0 0 16px;padding-left:22px}
.legal li{margin:6px 0}
.legal li::marker{color:var(--slate)}
.legal :where(p,li,td) a{color:var(--teal);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal :where(p,li,td) a:hover{text-decoration-thickness:2px}
.legal .summary{margin:32px 0;padding:24px 28px;border-radius:var(--r-md);background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline)}
.legal .summary h2{margin:0 0 8px;font-size:20px;line-height:28px}
.legal .summary ul{margin:0}
.legal .toc{margin:0 0 16px;padding:12px 24px 12px 44px;border-radius:var(--r-md);background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline)}
.legal .toc li{margin:0;font-size:14px;line-height:20px;break-inside:avoid}
.legal .toc a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);font-weight:400;text-decoration:none}
.legal .toc a:hover{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
@media (min-width:40em){.legal .toc{columns:2;column-gap:32px}}
@media (any-pointer:coarse){.legal .toc a{min-height:44px}}
.legal strong{font-weight:600}
.legal .refund-list{display:grid;gap:10px;margin:32px 0;padding:24px 28px 24px 46px;border-radius:var(--r-md);background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline)}
.legal .refund-list li{margin:0}
.site-foot > .fineprint:first-child{border-top:0}
.legal .note{color:var(--slate);font-size:15px;line-height:24px}
.legal table{width:100%;border-collapse:collapse;font-size:14px;line-height:22px}
.legal th,.legal td{padding:14px 16px;text-align:left;vertical-align:top;border-bottom:1px solid var(--hairline)}
.legal thead th{background:var(--paper-2);color:var(--slate);font-weight:600}
.legal tbody tr:last-child > *{border-bottom:0}
.legal tbody th{font-weight:600}


/* 404 */
/* 404: full-height column, never scrolls */
.page-nf{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.page-nf .nf{flex:1;min-height:0}
.nf{position:relative;overflow:hidden;display:grid;place-items:center;padding:56px var(--gutter);text-align:center}
.nf::before{content:"";position:absolute;left:50%;top:50%;width:min(1100px,160vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(255,98,93,.16) 0 22%,rgba(255,98,93,.09) 22.2% 44%,rgba(255,98,93,.05) 44.2% 66%,rgba(255,98,93,.025) 66.2% 88%,transparent 88.2%);pointer-events:none}
.nf > div{position:relative;max-width:640px}
.nf .pill{background:var(--coral-100);box-shadow:inset 0 0 0 1px rgba(255,98,93,.25)}
.nf .pill .dot{background:var(--coral-action);box-shadow:none}
.nf h1{margin-top:24px;font:600 clamp(2.5rem,1.6rem + 3vw,4rem)/1.05 var(--font-heading);letter-spacing:-.03em;text-wrap:balance}
.nf p.lead{margin-top:16px}
.nf .cta-row{justify-content:center}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin-top:28px}
.nf-links a{display:inline-flex;align-items:center;min-height:44px;color:var(--teal-ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}

.eyebrow{color:var(--coral-action)}
.page-hero .eyebrow + h1{margin-top:12px}
.page-hero .cta-row{justify-content:center;margin-top:32px}
@media (max-width:29.99em){.page-hero .cta-row .btn{flex:1 1 auto}}
.page-hero .price-pills{margin-top:24px}
.page-hero h1{max-width:18ch}
.hero-note{max-width:560px;margin:18px auto 0;color:var(--slate);font-size:15px;line-height:24px}
.hero-note a{color:var(--teal);font-weight:600}
.band-white .feature{background:var(--paper)}
.feature h2.h3{margin:18px 0 10px}
@media (min-width:64em){.features.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.feature .link-arrow{margin-top:auto}
.feature .tag + .link-arrow{margin-top:12px}

/* on-this-page pill row: sticks under the header; below 64em it scrolls sideways inside itself, with a fade at the end */
.subnav{position:sticky;top:64px;z-index:40;border-block:1px solid var(--hairline);background:var(--white)}
@media (min-width:56em){.subnav{top:72px}}
@media (max-width:55.99em){html:not(.js) .subnav{top:0}}
.subnav ul{display:flex;gap:8px;padding:12px 40px 12px 4px;overflow-x:auto;scrollbar-width:thin;scroll-padding-inline:16px 48px;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.subnav a,.pill-links a,.provider-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r-pill);background:var(--paper);box-shadow:inset 0 0 0 1px var(--hairline-2);font:500 14px/1 var(--font-body);text-decoration:none;white-space:nowrap}
.subnav a:hover,.pill-links a:hover,.provider-nav a:hover{box-shadow:inset 0 0 0 1px rgba(23,33,43,.3)}
@media (min-width:64em){.subnav ul{flex-wrap:wrap;justify-content:center;padding-inline:4px;overflow:visible;-webkit-mask-image:none;mask-image:none}}
/* anchors and keyboard focus clear the sticky header and the pill row */
html:has(.subnav){scroll-padding-top:152px}
.sec-group{scroll-margin-top:24px}
.pill-links,.provider-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.provider-nav{margin-bottom:clamp(28px,20px + 2vw,44px)}
.pill-links a{background:var(--white)}

/* text beside a product mock */
.feature-row{display:grid;gap:36px;align-items:center}
.fr-copy .h2{text-align:left}
.fr-copy .eyebrow{margin-bottom:12px}
.fr-copy .lead{margin-top:16px}
.fr-copy .points{margin-top:28px}
.fr-copy > .link-arrow{margin-top:16px}
.fr-art{padding:clamp(16px,3vw,48px);border-radius:var(--r-lg);background:radial-gradient(45% 65% at 100% 100%,#DDF2EE 0%,rgba(221,242,238,0) 100%),radial-gradient(50% 60% at 62% 112%,#FFD9CE 0%,rgba(255,217,206,0) 100%),linear-gradient(180deg,#FFF6F2,#FFF0EA);box-shadow:inset 0 0 0 1px rgba(255,98,93,.10)}
@media (min-width:48em){.fr-art{border-radius:var(--r-xl)}}
@media (min-width:64em){.feature-row{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px}.feature-row.rev > .fr-copy{order:2}}
.ui-row .when{color:var(--slate);font-size:12px;line-height:16px;white-space:nowrap}

/* checklists */
.check-grid{display:grid;gap:12px;max-width:1100px;margin-inline:auto}
.check-grid li{display:flex;gap:12px;padding:18px 20px;border-radius:var(--r-md);background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline)}
.band-white .check-grid li{background:var(--paper)}
.check-grid .icon{width:20px;height:20px;margin-top:2px;color:var(--teal);stroke-width:2.5}
.check-grid b{display:block;font:600 16px/24px var(--font-body)}
.check-grid small{display:block;margin-top:2px;color:var(--slate);font-size:14px;line-height:22px}
.check-grid a{color:var(--teal);font-weight:600}
@media (min-width:40em){.check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:64em){.check-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}

/* simple data tables (restack below 40em through .stack in site.css) */
.data-wrap{max-width:1040px;margin-inline:auto;border:1px solid var(--hairline-2);border-radius:var(--r-lg);background:var(--white);overflow:hidden}
.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:15px;line-height:24px}
.data-table th,.data-table td{padding:16px 20px;vertical-align:top;border-bottom:1px solid var(--hairline)}
.data-table thead th{background:var(--paper-2);color:var(--slate);font:600 14px/20px var(--font-body)}
.data-table tbody th{width:34%;font-weight:600}
.data-table tbody tr:last-child > *{border-bottom:0}
.data-table td{color:var(--slate)}
.data-table td .chip{margin-right:8px}
@media (max-width:39.99em){.data-table tbody th{width:auto}.data-table th,.data-table td{padding:4px 0;border:0}}
.after-table{max-width:1040px;margin:16px auto 0;color:var(--slate);font-size:15px;line-height:24px}

/* step lists that sit on paper */
.steps .step-card a,.points a{color:var(--teal);font-weight:600}
.page-hero .seals{margin-top:28px}
.note-card .notes{margin-top:12px}
.tm-center{text-align:center}

/* sign-in chooser */
.chooser{display:grid;gap:16px;max-width:960px;margin-inline:auto}
.choice{display:flex;flex-direction:column;align-items:flex-start;padding:32px 28px;border-radius:var(--r-lg);background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline)}
.choice .ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--coral-100);color:var(--coral-action)}
.choice h2{margin-top:20px;font:600 22px/30px var(--font-heading);letter-spacing:-.01em}
.choice p{margin:8px 0 24px;color:var(--slate)}
.choice .btn{width:100%;margin-top:auto}
.choice .link-arrow{margin-top:8px}
@media (min-width:48em){.chooser{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}}

/* contact cards */
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:1100px;margin-inline:auto}
.contact-card{display:flex;flex-direction:column;align-items:flex-start;padding:24px;border-radius:var(--r-md);background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline)}
.contact-card .micro{color:var(--coral-action)}
.contact-card h3{margin-top:8px;font:600 18px/26px var(--font-heading);letter-spacing:-.01em}
.contact-card p{margin-top:6px;color:var(--slate);font-size:15px;line-height:24px}
.contact-card .link-arrow{margin-top:auto;padding-top:12px;overflow-wrap:anywhere}
.contact-card .link-arrow .icon{flex:none}
.contact-card p a{color:var(--teal);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
@media (min-width:40em){.contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:80em){.contact-grid{max-width:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}

/* switch: one card per provider, each with its own anchor */
.provider{display:grid;gap:28px;padding:clamp(22px,16px + 2vw,40px);border-radius:var(--r-lg);background:var(--paper);box-shadow:inset 0 0 0 1px var(--hairline);scroll-margin-top:96px}
.provider + .provider{margin-top:20px}
.provider h3{font:600 clamp(1.375rem,1.1rem + .8vw,1.75rem)/1.2 var(--font-heading);letter-spacing:-.02em;text-wrap:balance}
.provider > div > p{margin-top:10px;color:var(--slate)}
.provider code{padding:1px 4px;border-radius:5px;background:rgba(23,33,43,.06);font:500 .9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere}
@media (min-width:64em){.provider{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:start}}

/* prose blocks and small notes */
.prose{max-width:760px;margin-inline:auto}
.prose .h2{text-align:left}
.prose p{margin-top:18px;font-size:17px;line-height:1.7}
.note-card{max-width:760px;margin-inline:auto;padding:24px 28px;border-radius:var(--r-md);background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline)}
.band-white .note-card{background:var(--paper)}
.note-card h2,.note-card h3{font:600 20px/28px var(--font-heading);letter-spacing:-.01em}
.note-card.rules{margin-top:clamp(28px,20px + 2vw,44px)}
.note-card p{margin-top:8px;color:var(--slate)}
.note-card a{color:var(--teal);font-weight:600}
.notes.centered{max-width:760px}

/* works map nodes as links (features page) */
a.node{text-decoration:none}
a.node:hover{box-shadow:inset 0 0 0 1px rgba(23,33,43,.34),0 6px 16px -10px rgba(23,33,43,.2)}
.faq-side .link-arrow{margin-top:8px}

/* pricing: notes under the plan cards; the partner card on a white band */
.plan-notes{max-width:1100px}
.band-white .more{background:var(--paper)}

/* security page: groups of four cards, two groups to a band */
.sec-group + .sec-group{margin-top:clamp(48px,32px + 3vw,72px);padding-top:clamp(48px,32px + 3vw,72px);border-top:1px solid var(--hairline-2)}
.sec-group-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 32px;margin-bottom:clamp(20px,16px + 1vw,28px)}
.sec-group-head .h2{font-size:clamp(1.75rem,1.2rem + 1.4vw,2.5rem);text-align:left}
.sec-group-head > div{max-width:44rem}
.sec-group-head p:not(.sec-group-links){margin-top:10px;color:var(--slate)}
.sec-group-head .link-arrow{flex:0 1 auto;min-width:0}
.sec-group-links{display:flex;flex:0 1 auto;flex-wrap:wrap;gap:0 24px;min-width:0}
.sec-cards.four{gap:16px}
@media (min-width:80em){.sec-cards.four{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}}
@media (min-width:64em) and (max-width:79.99em){.sec-cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sec-group .sec-card{background:var(--white)}
/* the report strip under the FAQ spans the same width as the FAQ */
.faq + .wrap > .need-more{max-width:none}
.band-white .sec-group .sec-card{background:var(--paper)}

/* keys in running text */
kbd{display:inline-block;min-width:1.6em;padding:1px 6px;border-radius:6px;background:var(--white);box-shadow:inset 0 0 0 1px var(--hairline-2),0 1px 0 var(--hairline-2);font:600 .85em/1.4 var(--font-body);text-align:center}