/* ===================================================================== pages.css — interior pages only (monthly, privacy, terms). Loads AFTER site.css. Nothing here overrides a shared component: every rule is either a new class or a documented variant class. Same tokens, same one-font system, same orange rationing (dots and hairline arcs only). ===================================================================== */ /* Reveal-off state. Set on when the reader has asked for reduced motion or the browser has no IntersectionObserver, so the page arrives finished rather than transitioning into place. */ .p-noanim .rv{opacity:1;transform:none;transition:none} .p-noanim .p-head-arc path{animation:none;stroke-dashoffset:0} /* ---------- interior page header ---------- */ .p-head{padding:184px 0 var(--s12);position:relative;overflow:hidden} .p-head-arc{position:absolute;right:0;top:110px;width:40%;height:420px;pointer-events:none;z-index:0;overflow:visible} .p-head-arc path{fill:none;stroke:var(--signal-lt);stroke-width:1.2;opacity:.38; stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.2s .3s cubic-bezier(.3,.8,.3,1) forwards} .p-head-arc path:nth-child(2){animation-delay:.6s} .p-head .frame{position:relative;z-index:1} .p-head h1{max-width:17ch} .p-head .lede{margin-top:var(--s4);max-width:56ch} /* breadcrumb-ish back link */ .p-up{display:flex;width:max-content;align-items:center;gap:8px;margin-bottom:var(--s3); font-size:13px;font-weight:700;font-variation-settings:"wght" 700; letter-spacing:.04em;text-transform:uppercase;color:var(--slate);text-decoration:none} .p-up:hover{color:var(--ink)} /* ---------- notice / disclosure callout ---------- */ .p-note{ margin-top:var(--s6);max-width:70ch; background:var(--lifted);border-radius:var(--r-consent); padding:24px 28px;box-shadow:var(--e1); border-left:3px solid var(--signal); } .band-lift .p-note{background:var(--white)} .p-note .nt{ display:inline-flex;align-items:center;gap:10px;margin-bottom:10px; font-size:13px;font-weight:700;font-variation-settings:"wght" 700; letter-spacing:.04em;text-transform:uppercase;color:var(--ink); } .p-note p{font-size:14.5px;line-height:1.6;color:var(--granite)} .p-note a{color:var(--ink)} /* ---------- artifact rows: a document you can actually open ---------- */ .p-objects{display:flex;flex-direction:column;gap:var(--s16);margin-top:var(--s12)} .p-object{display:grid;grid-template-columns:minmax(0,440px) minmax(0,1fr);gap:var(--s12);align-items:start} .p-object:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,440px)} .p-object:nth-child(even) .p-obj-fig{order:2} .p-object:nth-child(even) .p-obj-body{order:1} .p-obj-fig{margin:0;position:relative} .p-obj-sheet{ border-radius:8px;overflow:hidden;background:#fff; box-shadow:rgba(0,0,0,.10) 0 30px 60px -14px, rgba(0,0,0,.05) 0 4px 14px; transform:rotate(-1.2deg);transition:transform .5s cubic-bezier(.2,.7,.3,1); display:block; } .p-object:nth-child(even) .p-obj-sheet{transform:rotate(1.2deg)} .p-obj-sheet:hover{transform:rotate(0deg) translateY(-6px)} .p-obj-sheet img{width:100%;height:auto;display:block} .p-obj-fig figcaption{margin-top:18px;font-size:13px;line-height:1.5;color:var(--slate);max-width:44ch} .p-obj-when{ display:inline-flex;align-items:center;gap:10px; font-size:13px;font-weight:700;font-variation-settings:"wght" 700; letter-spacing:.04em;text-transform:uppercase;color:var(--ink);margin-bottom:var(--s2); } .p-obj-when::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none} .p-obj-when .u{ font-weight:450;font-variation-settings:"wght" 450; letter-spacing:0;text-transform:none;color:var(--slate); } .p-obj-body h2{max-width:20ch} .p-obj-body p{margin-top:var(--s3);color:var(--charcoal);max-width:60ch;font-size:17px;line-height:1.55} .p-obj-note{ margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--dust); font-size:13px;line-height:1.7;color:var(--slate);max-width:60ch; } .p-obj-note b{font-weight:700;font-variation-settings:"wght" 700;color:var(--ink)} /* ---------- "not promised" list inside the ink slab ---------- */ .p-nots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6) var(--s8);margin-top:var(--s8)} .p-not{border-top:1.5px solid rgba(243,240,238,.35);padding-top:var(--s3)} .p-not .p-nk{ font-size:13px;font-weight:700;font-variation-settings:"wght" 700; letter-spacing:.04em;text-transform:uppercase;color:var(--signal-lt); } .p-not h3{margin-top:12px;font-size:21px} .p-not p{margin-top:10px;font-size:15px;line-height:1.55;color:#C9C5C1} /* ---------- legal document layout ---------- */ .p-legal{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:var(--s12); align-items:start;padding-bottom:var(--s16)} .p-index{position:sticky;top:var(--s6);align-self:start} .p-index h2{ font-size:12px;font-weight:700;font-variation-settings:"wght" 700;letter-spacing:.05em; text-transform:uppercase;color:var(--slate);margin-bottom:var(--s2); padding-bottom:10px;border-bottom:1.5px solid var(--ink); } .p-index ol{list-style:none;margin:0;padding:0;counter-reset:ix} .p-index li{counter-increment:ix;margin-bottom:2px} .p-index a{ display:flex;gap:10px;text-decoration:none;padding:7px 0; font-size:14px;line-height:1.35;color:var(--granite); } .p-index a::before{ content:counter(ix,decimal-leading-zero);flex:none; font-size:11px;font-weight:700;font-variation-settings:"wght" 700; letter-spacing:.05em;color:var(--dust);padding-top:2px;font-variant-numeric:tabular-nums; } .p-index a:hover{color:var(--ink)} .p-index a:hover::before{color:var(--signal)} /* key facts strip under the page title */ .p-meta{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3); margin-top:var(--s6);border-top:1.5px solid var(--ink);padding-top:var(--s3);max-width:70ch; } .p-meta div{font-size:12px;font-weight:700;font-variation-settings:"wght" 700; letter-spacing:.04em;text-transform:uppercase;color:var(--slate)} .p-meta b{ display:block;margin-top:8px;font-size:17px;line-height:1.25;letter-spacing:-.02em; font-weight:500;font-variation-settings:"wght" 500;text-transform:none;color:var(--ink); overflow-wrap:anywhere; } /* the readable measure */ .p-body{max-width:68ch} .p-body h2{ font-size:28px;line-height:1.2;margin:var(--s12) 0 0; padding-top:var(--s3);border-top:1.5px solid var(--ink);scroll-margin-top:24px; } .p-body > h2:first-child{margin-top:0} .p-body h3{font-size:19px;margin-top:var(--s6)} .p-body p{margin-top:var(--s3);font-size:17px;line-height:1.62;color:var(--charcoal)} .p-body a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--dust)} .p-body a:hover{border-bottom-color:var(--signal)} .p-body ul{list-style:none;margin:var(--s3) 0 0;padding:0} .p-body li{ position:relative;padding-left:26px;margin-top:14px; font-size:16.5px;line-height:1.6;color:var(--charcoal); } .p-body li::before{ content:"";position:absolute;left:4px;top:.62em; width:7px;height:7px;border-radius:50%;background:var(--signal); } .p-body li strong{font-weight:700;font-variation-settings:"wght" 700;color:var(--ink)} .p-body .p-leadin{ font-size:19px;line-height:1.55;color:var(--ink); font-weight:500;font-variation-settings:"wght" 500; } /* the AI disclosure, given its own weight rather than a subsection */ .p-discl{ margin:var(--s12) 0 0;background:var(--ink);color:var(--canvas); border-radius:var(--r-lg);padding:var(--s8) var(--s6); } .p-discl h2{border-top:0;margin:0;padding:0;color:var(--canvas);font-size:30px;max-width:22ch;scroll-margin-top:24px} .p-discl .eyebrow{color:#fff} .p-discl p{color:#C9C5C1;font-size:16.5px} .p-discl a{color:var(--canvas);border-bottom-color:rgba(243,240,238,.4)} .p-discl ul{margin-top:var(--s4)} .p-discl li{color:#DCD8D4;font-size:16px} .p-discl li::before{background:var(--signal-lt)} .p-discl li strong{color:#fff} .p-discl .out{ margin-top:var(--s4);padding-top:var(--s3); border-top:1px solid rgba(243,240,238,.2);font-size:15px;color:#9C9793; } /* small table inside a legal page */ .p-table{width:100%;border-collapse:collapse;margin-top:var(--s4);font-size:15px} .p-table th,.p-table td{text-align:left;padding:14px 16px 14px 0; border-bottom:1px solid var(--dust);vertical-align:top;line-height:1.5} .p-table thead th{ font-size:11px;font-weight:700;font-variation-settings:"wght" 700;letter-spacing:.05em; text-transform:uppercase;color:var(--slate);border-bottom:1.5px solid var(--ink);padding-top:0; } .p-table td.fee{ font-weight:500;font-variation-settings:"wght" 500;letter-spacing:-.02em; font-size:20px;white-space:nowrap;font-variant-numeric:tabular-nums; } .p-scroll{overflow-x:auto} /* end-of-document navigation */ .p-navend{ display:flex;flex-wrap:wrap;gap:var(--s2); margin-top:var(--s12);padding-top:var(--s4);border-top:1.5px solid var(--ink); } /* ---------- responsive ---------- */ @media (max-width:1100px){ .p-head{padding:150px 0 var(--s8)} .p-head-arc{display:none} .p-object,.p-object:nth-child(even){grid-template-columns:1fr;gap:var(--s6)} .p-object:nth-child(even) .p-obj-fig,.p-object:nth-child(even) .p-obj-body{order:0} .p-obj-sheet,.p-object:nth-child(even) .p-obj-sheet{transform:none;max-width:440px} .p-objects{gap:var(--s12)} .p-legal{grid-template-columns:1fr;gap:var(--s6)} .p-index{position:static} .p-index ol{columns:2;column-gap:var(--s6)} } @media (max-width:767px){ .p-head{padding:120px 0 var(--s8)} .p-nots{grid-template-columns:1fr;gap:var(--s4)} .p-meta{grid-template-columns:1fr 1fr;gap:var(--s3)} .p-index ol{columns:1} .p-body h2{font-size:23px;margin-top:var(--s8)} .p-body p,.p-body li{font-size:16px} .p-discl{padding:var(--s6) var(--s3);border-radius:var(--r-lg)} .p-discl h2{font-size:24px} .p-note{padding:20px 22px} .p-obj-body p{font-size:16px} } @media (prefers-reduced-motion:reduce){ .p-head-arc path{animation:none;stroke-dashoffset:0} .p-obj-sheet{transition:none} }