:root{--navy:#071a3d;--navy2:#062746;--teal:#0a97a8;--cyan:#16bac7;--violet:#6754e7;--ink:#102040;--muted:#5a6d8e;--line:#dbe7ee;--bg:#f7fbfd;--panel:#fff;--mint:#e6f9f5;--blue:#1876e8;/* Both were referenced by ported rules and defined nowhere, so every declaration using them was thrown away by the browser. --plum is the old pre-rebrand hue and is mapped onto the brand navy the cart header already uses. --teal-lt is the third colour of the brand rule. */--plum:#071a3d;--teal-lt:#16bac7;--serif:"DM Serif Display",Georgia,serif;--sans:"Sora",Arial,sans-serif} *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.45}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}h1,h2,h3,p{margin-top:0}h1,h2{letter-spacing:-.03em}.runtime-aux,.runtime-only,.runtime-support{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important}.runtime-source-hidden{display:none!important} .site-header{height:72px;background:rgba(255,255,255,.95);border-bottom:1px solid #e8f0f4;position:relative;z-index:10}.header-inner{max-width:1420px;height:100%;margin:auto;padding:0 44px;display:flex;align-items:center;gap:38px}.logo-btn{border:0;background:transparent;padding:0;display:flex;align-items:center}.site-logo{width:145px;height:auto}.main-nav{display:flex;align-items:center;gap:28px;margin-left:36px}.main-nav button,.main-nav a{border:0;background:transparent;color:#17355e;font-size:13px;white-space:nowrap}.main-nav .current{color:#008c9b;border-bottom:2px solid var(--teal);padding-bottom:7px}.header-right{margin-left:auto;display:flex;align-items:center;gap:22px}.header-cta,.dark-btn{background:var(--navy2)!important;color:#fff!important;border:0!important;border-radius:8px!important;padding:13px 23px!important;font-weight:700!important}.header-cta{margin-left:8px}.login-link{width:auto!important;height:auto!important;border:0!important;background:none!important;color:#17355e!important}.login-copy{display:block}.marketing-header .avatar-mark{display:none}.marketing-hidden{display:none!important}/* Removed 20 September 2026. This was the only rule setting the nav gap, and it applied on planner screens only, so the menu spread from 28px to 35px the moment you opened New Packet and every item after Home shifted right. Both header variants now take the base gap. */.app-header .avatar{width:40px;height:40px;border-radius:50%;border:1px solid #cddae4;background:#f5f9fb}.app-header .avatar-mark{display:grid;place-items:center;width:100%;height:100%;font-size:12px;font-weight:700}.header-help{color:#17355e}.site-footer{background:#fff;border-top:1px solid #dce7ee;padding:28px 44px 18px}.footer-inner{max-width:1420px;margin:auto;display:flex;align-items:center}.footer-brand{display:flex;align-items:center;gap:16px}.footer-brand img{width:100px}.footer-brand span{color:#58708e;font-size:11px}.footer-nav{margin-left:auto;display:flex;gap:22px;align-items:center}.footer-nav button,.footer-nav a{border:0;background:transparent;font-size:11px;color:#48617f;padding:0}.footer-bottom{max-width:1420px;margin:18px auto 0;border-top:1px solid #edf2f5;padding-top:14px;color:#687c97;font-size:10px}.eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:11px;font-weight:800;color:#1c5674}.scribble{font-family:"Comic Sans MS",cursive;color:#1178c8;font-size:19px;line-height:1.2;transform:rotate(-4deg)} /* home */ .screen-home #aboutPage{display:block}.home-hero{max-width:1420px;margin:auto;min-height:450px;padding:28px 48px 0;display:grid;grid-template-columns:42% 58%;align-items:center;background:#fff}.home-hero-copy{padding:0 0 35px}.home-hero h1{font-family:var(--serif);font-size:58px;line-height:.98;margin:14px 0 18px;color:var(--navy)}.home-hero h1 span{color:#0a5670}.home-hero p{max-width:510px;color:#556b89;font-size:15px}.hero-actions{display:flex;align-items:center;gap:20px;margin:22px 0}.play-link{font-weight:600;color:#17355e}.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 24px;max-width:510px;font-size:12px;color:#385979}.check-grid span::first-letter{color:#0aa1ad}.home-hero-art{height:430px;overflow:hidden;border-radius:0 0 0 34px}.home-hero-art img{width:100%;height:100%;object-fit:cover}.metrics-band{height:92px;display:grid;grid-template-columns:repeat(4,1fr);align-items:center;max-width:1420px;margin:auto;background:#fff;border-top:1px solid #e5edf1;border-bottom:1px solid #e5edf1;position:relative}.metrics-band #demoFigures{position:absolute}.metric{text-align:center;border-right:1px solid #ccdbe4}.metric:last-child{border:0}.metric b{display:block;font-size:28px;color:var(--navy)}.metric:first-of-type b{color:#0a8f98}.metric span{font-size:10px;letter-spacing:.12em;color:#61748e}.home-section{max-width:1420px;margin:auto;padding:38px 48px}.three-card-section{display:grid;grid-template-columns:1.1fr repeat(3,1fr);gap:22px;background:linear-gradient(90deg,#fbfdfe,#f1f9fc)}.section-copy h2{font-size:28px;line-height:1.08;color:var(--navy)}.section-copy p{color:#5a6c89;line-height:1.6}.section-copy a{color:#0a6cbe;text-decoration:underline;font-weight:600}.mini-card{background:#fff;border:1px solid #e0e9ef;border-radius:10px;padding:18px;box-shadow:0 6px 20px rgba(33,73,100,.05)}.mini-card h3{font-size:19px;margin:8px 0}.mini-card p{font-size:12px;color:#5e7190;min-height:70px}.circle-icon{width:40px;height:40px;border-radius:50%;background:#ddf7f2;color:#04969f;display:grid;place-items:center;font-size:20px}.circle-icon.blue{background:#e6efff;color:#176be0}.packet-band{max-width:1420px;margin:auto;padding:25px 48px;background:linear-gradient(90deg,#effbfe,#f8fcfe);display:grid;grid-template-columns:32% 68%;align-items:center;min-height:230px}.packet-band img{width:100%;height:225px;object-fit:cover}.how-section{max-width:1420px;margin:auto;background:#fff;padding:26px 48px}.how-head{display:flex;justify-content:space-between;align-items:center}.how-head h2{font-size:26px;margin-bottom:2px}.how-head p{color:#657893}.how-head a{color:#0b72c4;text-decoration:underline}.home-pricing{max-width:1420px;margin:auto;background:#f8fbfd;padding:30px 48px;display:grid;grid-template-columns:30% 35% 35%;gap:20px}.price-card{position:relative;background:#fff;border:1px solid #dbe7ee;border-radius:11px;padding:26px}.price-card.compact{padding:18px}.price-card h3{font-size:16px}.price-card p{color:#586e8b}.price-row{display:flex;align-items:center;justify-content:space-between}.price-row strong{font-size:34px;color:var(--navy)}.dark-btn.small{padding:10px 16px!important;font-size:11px}.outline-btn{border:1px solid #8aa0b9;border-radius:7px;padding:10px 16px;font-weight:600}.final-cta{max-width:1420px;margin:auto;min-height:160px;padding:25px 48px;background:linear-gradient(90deg,#f0f7ff,#f8fcff);display:grid;grid-template-columns:56% 14% 30%;align-items:center;overflow:hidden}.final-cta h2{font-family:var(--serif);font-size:35px;margin:5px 0}.final-cta p{color:#5c708c}.final-cta img{width:100%;height:150px;object-fit:cover;object-position:center top;align-self:end}.cta-note{text-align:center} /* pricing */ .screen-pricing #pricingPage{display:block;max-width:1420px;margin:auto;background:#fff}.pricing-hero{display:grid;grid-template-columns:44% 56%;align-items:center;min-height:420px;padding-left:48px;background:linear-gradient(90deg,#fff,#f7fbfe)}.pricing-hero h1{font-family:var(--serif);font-size:54px;line-height:.98;color:var(--navy);margin:18px 0}.pricing-hero h1 span{color:#0a5670}.pricing-hero p{font-size:15px;color:#556b89;max-width:460px}.pricing-hero img{height:420px;width:100%;object-fit:cover}.pricing-cards{padding:28px 48px;display:grid;grid-template-columns:1fr 1fr;gap:28px;background:#f7fbfd}.big-price{display:block;font-size:54px;line-height:1;margin:15px 0;color:var(--navy)}.price-card ul{list-style:none;padding:0;margin:20px 0}.price-card li{margin:13px 0;padding-left:28px;position:relative;color:#3e577a}.price-card li:before{content:'✓';position:absolute;left:0;width:18px;height:18px;border-radius:50%;background:#058993;color:#fff;display:grid;place-items:center;font-size:11px}.price-badge{position:absolute;right:28px;top:28px;background:#e6f8f8;color:#017b88;padding:7px 12px;border-radius:7px;font-size:11px;font-weight:800}.price-badge.violet{background:#f2efff;color:#6550d9}.teal-btn{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(90deg,#068b9a,#0aa5b4)!important;color:#fff!important;border:0!important;border-radius:8px!important;padding:14px 24px!important;font-weight:700}.rule-note{border-top:1px solid #dce6ec;padding-top:16px}.pricing-schematic{height:150px;width:100%;object-fit:cover;object-position:bottom}.pricing-start{margin:0 48px 38px;border:1px solid #b9dbe2;border-radius:0;border-left:0;border-right:0;padding:28px 32px;display:grid;grid-template-columns:1.1fr 1fr auto auto;align-items:center;gap:28px;background:linear-gradient(92deg,#e3f3f6,#f2fafb)}.pricing-start .eyebrow{color:#0a5670}.pricing-start h2{font-size:28px}.pricing-start p{color:#3f5a76}.pricing-start .scribble{font-size:18px}.violet-text{color:#6754e7} /* planner */ .planner-page{background:radial-gradient(circle at 92% 8%,#e9fbfd 0,transparent 28%),#f7fbfd;min-height:calc(100vh - 72px);padding:32px 26px 40px}.planner-heading{max-width:1370px;margin:0 auto 20px;display:flex;justify-content:space-between;align-items:flex-end}.planner-heading h1{font-family:var(--serif);font-size:48px;margin:10px 0 4px;color:var(--navy)}.planner-heading p{font-size:17px;color:#657895}.shell{max-width:1370px;margin:auto}.approved-stepper{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;background:#fff;border:1px solid #dae7ee;border-radius:13px;padding:12px;margin-bottom:18px}.step-pill{height:54px;border:1px solid #c7dce5;background:#fff;color:#087a89;border-radius:10px;font-weight:700}.step-pill span{display:inline-grid;place-items:center;width:25px;height:25px;border:1px solid currentColor;border-radius:50%;margin-right:9px}.step-pill.active{background:linear-gradient(90deg,#0793a1,#0b8998);color:#fff;border-color:#0793a1}.planner-grid{display:grid;grid-template-columns:230px minmax(0,1fr) 260px;gap:16px}.guide-card,.form-card,.plan-card,.review-wrap{background:#fff;border:1px solid #d9e6ed;border-radius:13px}.guide-card{padding:22px 18px;min-height:760px;overflow:hidden;position:relative}.guide-card h2{font-size:20px;color:#067e8c}.guide-card>p{color:#62738d;line-height:1.6}.guide-tip{margin-top:28px;border-left:4px solid #08a3b1;padding-left:14px}.gt-lede{font-size:16px!important;font-weight:700;color:#13264a!important}.gt-why{font-size:13px!important;color:#5d708d!important}.guide-card>img{position:absolute;left:0;bottom:0;width:100%;height:420px;object-fit:cover;opacity:.9}.form-card{padding:24px 26px;min-height:760px}.step-kicker{color:#078291;font-weight:800;font-size:12px}.step-pane h1,.review-summary-card h1{font-family:var(--serif);font-size:34px;margin:5px 0;color:var(--navy)}.lead{color:#667893;font-size:15px;margin-bottom:24px}.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.f{min-width:0}.f.full{grid-column:1/-1}.f label,.group-label{display:block;font-size:12px;font-weight:700;color:#263c5f;margin-bottom:8px}.f input:not([type=checkbox]):not([type=radio]):not([type=range]),.f select,.f textarea{width:100%;min-height:44px;border:1px solid #cbdce6;border-radius:7px;background:#fff;padding:10px 12px;color:#425778}.f textarea{min-height:80px;resize:vertical}.hint{font-size:11px;color:#637692;line-height:1.45;margin-top:6px}.req{color:#6550e4}.opt{font-size:10px;text-transform:uppercase;color:#71819a}.form-actions{display:flex;justify-content:space-between;border-top:1px solid #e5edf2;margin-top:24px;padding-top:20px}.form-actions button,.review-actions button{border:1px solid #ccdbe5;border-radius:7px;padding:11px 20px;background:#fff;font-weight:700}.form-actions .next,.review-actions .next{background:#0793a0;color:#fff;border-color:#0793a0}.form-actions .to-review{background:#6754e7;border-color:#6754e7}.datefield{position:relative;display:grid;grid-template-columns:1fr 42px}.datefield input{border-radius:7px 0 0 7px!important}.datebtn{border:1px solid #cbdce6;border-left:0;border-radius:0 7px 7px 0;background:#fff}.datebtn:before{content:'▣';color:#087f90}.seg{display:grid;grid-auto-flow:column;border:1px solid #cbdce5;border-radius:8px;overflow:hidden}.seg label{margin:0!important}.seg input{position:absolute;opacity:0;pointer-events:none}.seg span{display:block;padding:14px;text-align:center;border-right:1px solid #d7e3ea;font-weight:700}.seg input:checked+span{background:#e3f8f8;color:#047f8a}.adv{border:1px solid #dbe6ed;border-radius:9px;margin:12px 0;background:#fff}.adv summary{font-weight:700;padding:14px;cursor:default}.adv .body{padding:0 14px 14px}.rangewrap{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}.rangewrap input[type=range]{width:100%;accent-color:#0b9cab}.valwrap{display:flex;border:1px solid #d4e1e8;border-radius:6px;overflow:hidden}.valwrap .val{width:70px!important;border:0!important;min-height:34px!important;padding:5px!important}.valu{padding:8px;font-style:normal}.unit-seg{display:flex}.unit-seg button{border:1px solid #d5e1e8;background:#fff;padding:7px;font-size:10px}.unit-seg button.on{background:#0b949f;color:#fff}.mirror[hidden],.child[hidden],.fieldwarn[hidden],.datepop[hidden]{display:none!important}.checks{display:grid;gap:8px}.check{border:1px solid #d6e3ea;border-radius:7px;padding:11px;display:flex;gap:8px;align-items:center}.hint-inline{font-size:10px;color:#667793;margin-left:auto}.constraint-static{display:grid;grid-template-columns:1fr 1fr;gap:10px}.constraint-static span{border:1px solid #d6e3ea;border-radius:7px;padding:12px;color:#455a78}.chipwrap:not(:empty)+.constraint-static{display:none}.plan-card{padding:20px;min-height:760px}.plan-title h2{font-size:20px;margin:0}.plan-title span{font-size:11px;color:#068494}.plan-card .helper{font-size:12px;color:#667991}.plan-summary{display:grid;gap:10px;margin-top:18px}.plan-row{padding:13px;border:1px solid #d7e3ea;border-radius:8px}.plan-row small{display:block;text-transform:uppercase;letter-spacing:.12em;color:#73859c;font-size:9px}.plan-row strong{display:block;margin-top:3px}.plan-static-note{margin-top:14px;background:#e9fbf8;border:1px solid #c8ebe6;border-radius:8px;padding:14px;font-weight:600;color:#29616c}.plan-live[hidden]{display:none}.err:empty{display:none}.step5-grid{grid-template-columns:230px minmax(0,1fr) 260px}.step5-grid .review-wrap{grid-column:2;grid-row:1}.step5-grid .plan-card{grid-column:3;grid-row:1}.step5-grid .guide-card{grid-column:1;grid-row:1}.review-wrap{padding:0;border:0;background:transparent}.review-summary-card{background:#fff;border:1px solid #d8e5ec;border-radius:13px;padding:25px;min-height:760px}.summary-block{border:1px solid #dbe6ed;border-radius:10px;padding:16px;margin:18px 0}.summary-block h3{font-size:16px}.summary-six{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.summary-six>div{border:1px solid #d9e5ec;border-radius:8px;background:#fafdff;padding:13px}.summary-six small{display:block;color:#788aa0;font-size:10px}.summary-six strong{display:block;margin-top:4px}.tag-row{display:flex;gap:10px}.tag-row span{background:#e3faf7;color:#087b87;padding:6px 11px;border-radius:999px;font-size:10px;font-weight:700}.tag-row .violet{background:#f1eaff;color:#654bd9}.review-actions{border-top:1px solid #e3ebf0;margin-top:24px;padding-top:18px;display:flex;justify-content:space-between} /* account */ .screen-account #accountPage{display:block;max-width:1420px;margin:auto}.account-hero{min-height:260px;display:grid;grid-template-columns:47% 53%;align-items:center;padding-left:52px;background:linear-gradient(90deg,#fff,#f6fbfe)}.account-hero h1{font-family:var(--serif);font-size:54px;line-height:.98;margin:12px 0;color:var(--navy)}.account-hero h1 span{color:#0a5670}.account-hero p{color:#556b89;max-width:520px;font-size:15px}.account-hero img{width:100%;height:290px;object-fit:cover}.account-panel{margin:0 44px;transform:translateY(-5px);display:grid;grid-template-columns:1fr 1fr;border-radius:14px;overflow:hidden;box-shadow:0 12px 35px rgba(29,68,97,.08)}.account-dark{background:linear-gradient(140deg,#071b40,#0b3154);color:#fff;padding:38px}.account-dark h2,.account-signin h2{font-family:var(--serif);font-size:32px}.account-dark p{color:#d7e5f0}.account-dark dl div{padding:15px 0;border-bottom:1px solid rgba(255,255,255,.12)}.account-dark dt b{color:#55e6e2;margin-left:12px}.account-dark dd{margin-left:42px;color:#dbe8f2}.scribble.light{color:#fff;font-size:16px;margin-top:25px}.account-signin{background:#fff;padding:38px}.account-signin>p{color:#5d7190}.account-signin label{display:block;font-weight:700;margin:20px 0 8px}.account-signin input{width:100%;height:48px;border:1px solid #cfdde6;border-radius:8px;padding:12px}.account-signin input:disabled{opacity:1;background:#fff;color:#5c7091}.account-signin .account-send{width:100%;margin-top:16px}.account-status{background:#ecfbf7;border:1px solid #c7eae4;border-radius:8px;padding:14px;color:#245f6b}.saved-section{margin:30px 44px;display:grid;grid-template-columns:1.15fr .85fr;gap:28px;border:1px solid #dbe6ed;border-radius:13px;background:#fff;padding:25px}.saved-section h2{font-family:var(--serif);font-size:38px;margin:6px 0}.draft-list:empty{display:none}.draft-static{display:grid;gap:9px;margin-top:15px}.draft-list:not(:empty)+.draft-static{display:none}.draft-static>div{display:grid;grid-template-columns:60px 1fr auto;gap:6px 10px;align-items:center;border:1px solid #dce6ed;border-radius:8px;padding:12px}.draft-static span{background:#0aa68e;color:#fff;padding:5px 8px;border-radius:6px;font-size:10px;font-weight:800}.draft-static small{grid-column:2;color:#697b94}.draft-static b{grid-column:3;grid-row:1/3;color:#0a6caa;font-size:11px}.saved-benefits{list-style:none;padding:25px;border-left:1px solid #e2e9ee}.saved-benefits li{margin:20px 0;padding-left:30px;position:relative;color:#456080}.saved-benefits li:before{content:'✓';position:absolute;left:0;width:20px;height:20px;border-radius:50%;background:#0ab39f;color:#fff;display:grid;place-items:center}.account-lobby{height:240px;overflow:hidden}.account-lobby img{width:100%;height:100%;object-fit:cover} /* packet preview / paid */ .screen-preview,.screen-paid{background:linear-gradient(180deg,#fff,#f7fbfd)}.screen-preview .review-wrap,.screen-paid .review-wrap{display:block!important;max-width:1420px;margin:auto;padding:20px 34px 35px}.packet-head{display:flex;justify-content:space-between;padding:20px 12px 18px}.packet-head h1{font-family:var(--serif);font-size:46px;margin:5px 0;color:var(--navy)}.packet-head p{color:#55708f}.packet-layout{display:grid;grid-template-columns:225px 1fr;gap:18px}.visual-packet-nav{background:#fff;border:1px solid #dbe6ed;border-radius:11px;padding:18px;height:max-content}.visual-packet-nav>div:not(.eyebrow){display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:8px;padding:9px 7px;border-radius:7px;font-size:12px}.visual-packet-nav .selected{background:#edf5ff;color:#0a61bd;font-weight:700}.visual-packet-nav span{font-size:10px}.visual-packet-nav em{font-style:normal;background:#f0e8ff;color:#6647de;padding:4px 7px;border-radius:999px;font-size:9px}.packet-main{min-width:0}.unlock-top{background:#fff;border:1px solid #dbe6ed;border-radius:11px;padding:16px 18px;display:flex;justify-content:flex-end;gap:18px;align-items:center;margin-bottom:16px}.unlock-top>div{margin-right:auto;display:grid;grid-template-columns:auto 1fr;column-gap:10px}.unlock-top span{grid-column:2;color:#60718e;font-size:11px;max-width:360px}.violet-btn{background:#6754e7;color:#fff;border:0;border-radius:7px;padding:13px 21px;font-weight:700}.preview-overview{display:grid;grid-template-columns:repeat(4,1fr);background:#fff;border:1px solid #dbe6ed;border-radius:11px;padding:20px;margin-bottom:13px}.preview-overview>div{text-align:center;border-right:1px solid #e1e9ee}.preview-overview>div:last-child{border:0}.preview-overview .circle-icon{margin:0 auto 8px}.preview-overview strong,.preview-overview small{display:block}.preview-overview small{color:#617493;margin-top:5px}.locked-row{display:grid;grid-template-columns:42px 1fr 250px;gap:12px;align-items:center;background:#fff;border:1px solid #dce6ed;border-radius:9px;padding:12px 16px;margin:8px 0}.row-num{width:28px;height:28px;border-radius:50%;background:#edf5ff;color:#1671d8;display:grid;place-items:center;font-size:10px}.skeleton-lines{display:grid;grid-template-columns:1fr .8fr;gap:20px;margin-top:8px}.skeleton-lines i{height:8px;border-radius:10px;background:linear-gradient(90deg,#e4e9f0 60%,transparent 60%);box-shadow:0 13px 0 #edf1f5}.locked-status{position:relative;display:grid;grid-template-columns:20px 1fr;align-items:center;padding-right:112px;min-height:40px}.locked-status small{grid-column:2;color:#6b7d95;font-size:9px}.locked-status em{position:absolute;right:0;top:0;white-space:nowrap;font-style:normal;background:#e5f9f5;color:#09857f;padding:5px 9px;border-radius:999px;font-size:9px;font-weight:700}.locked-row.add-on{border-color:#91ddd8;background:#f9fffe}.locked-row.add-on .locked-status em{background:#f0e7ff;color:#6750da}.unlock-bottom{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;border:1px solid #dbe5ec;border-radius:10px;background:linear-gradient(90deg,#f3f7ff,#f8f5ff);padding:16px;margin-top:14px}.unlock-bottom p{margin:3px 0;color:#637693;font-size:10px}.paid-title{display:flex;justify-content:space-between;align-items:flex-start;background:#fff;border:1px solid #dbe6ed;border-radius:11px;padding:18px}.paid-title h2{font-family:var(--serif);font-size:32px;margin:4px 0}.paid-title p{color:#657792}.paid-title>span{background:#e6faf6;color:#07867f;border-radius:999px;padding:7px 11px;font-size:10px;font-weight:700}.paid-top-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:12px 0}.paid-top-stats>div,.paid-grid>div{border:1px solid #dbe6ed;border-radius:9px;background:#fff;padding:13px}.paid-top-stats small,.paid-grid small{display:block;color:#6a7d96;font-size:10px}.paid-top-stats b{font-size:20px}.paid-card{background:#fff;border:1px solid #dbe6ed;border-radius:10px;padding:15px;margin:11px 0}.paid-card h3{margin-bottom:12px}.paid-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.paid-grid b{font-size:19px}.export-ready{display:grid;grid-template-columns:65% 35%;align-items:center;background:linear-gradient(90deg,#f5f7ff,#fbf9ff);border:1px solid #dbe5ec;border-radius:11px;padding:15px;margin-top:12px}.export-ready img{width:100%;height:285px;object-fit:cover}.export-ready div{padding:20px}.export-ready h3{font-size:22px}.export-ready p{color:#61738f}.screen-preview #reviewIndex,.screen-paid #reviewIndex{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important} @media(max-width:900px){.header-inner{padding:0 18px}.mk-extra{display:none}.main-nav{gap:12px;margin-left:10px}.home-hero,.pricing-hero,.account-hero{grid-template-columns:1fr}.home-hero-art{height:340px}.three-card-section{grid-template-columns:1fr 1fr}.section-copy{grid-column:1/-1}.home-pricing{grid-template-columns:1fr}.pricing-cards,.account-panel,.saved-section{grid-template-columns:1fr}.planner-grid,.step5-grid{grid-template-columns:1fr}.guide-card,.plan-card{min-height:auto}.approved-stepper{grid-template-columns:1fr 1fr}.step-pill{height:46px}.packet-layout{grid-template-columns:1fr}.visual-packet-nav{display:none}.locked-row{grid-template-columns:36px 1fr}.locked-status{grid-column:2}.preview-overview{grid-template-columns:1fr 1fr;gap:18px}.paid-top-stats,.paid-grid{grid-template-columns:1fr 1fr}.final-cta{grid-template-columns:1fr}.final-cta img{display:none}} /* ---------- FAQ, 17 September 2026 ---------- Every rule for the FAQ screen, scoped to #faqPage. Moved here from an inline block in index.html. The id outranks any class rule in site.css whatever the load order, and nothing here can reach another screen. Tokens are the site.css ones: --navy, --serif, --sans, --line. */ #faqPage{width:100%;max-width:1420px;margin:0 auto;background:var(--bg,#f7fbfd)} #faqPage .container{max-width:1420px;margin:0 auto} /* Hero. Copy left, photo bleeding off the right edge and fading in from the left, script over the fade rather than over her. */ #faqPage .hero{position:relative;display:grid;grid-template-columns:46% 54%;align-items:stretch; min-height:300px;padding-left:60px;overflow:hidden; background:linear-gradient(90deg,#fff 0,#fff 40%,#f4f9fd 100%)} #faqPage .hero-copy{align-self:center;padding:34px 24px 34px 0;position:relative;z-index:2} #faqPage .hero-copy .eyebrow{color:#1c5674} #faqPage .hero h1{font-family:var(--serif,"DM Serif Display",Georgia,serif);font-weight:700; font-size:54px;line-height:.98;margin:14px 0 16px;color:var(--navy,#071a3d);letter-spacing:-.03em} #faqPage .hero h1 .accent{color:#0a5670} #faqPage .hero-copy p{color:#556b89;font-size:15px;line-height:1.45;max-width:470px;margin:0} #faqPage .hero-art{position:relative;min-height:300px; margin-right:calc(-1 * var(--bleed,0px))} #faqPage .hero-image{position:absolute;inset:0;width:100%;height:100%;max-width:none; object-fit:cover;object-position:center 22%; mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 18%,#000 42%); -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 18%,#000 42%)} #faqPage .hero-art .script{position:absolute;left:3%;top:26px;height:118px;width:auto;max-width:none;z-index:2} /* Body. Sidebar and questions on the pale field. */ #faqPage .main-layout{display:grid;grid-template-columns:226px minmax(0,1fr);gap:38px; align-items:start;padding:12px 56px 40px} #faqPage .sidebar{position:sticky;top:88px;display:grid;gap:18px} #faqPage .side-menu{display:grid;background:#fff;border:1px solid var(--line,#dbe7ee); border-radius:6px;overflow:hidden} #faqPage .side-menu a{display:grid;grid-template-columns:26px 1fr 14px;align-items:center; min-height:52px;padding:0 16px;color:#1f3558;font-size:13px;font-weight:500; border-top:1px solid #e8eef3;transition:background .15s,color .15s} #faqPage .side-menu a:first-child{border-top:0} #faqPage .side-menu a .num{font-size:11px;font-weight:800;color:#1f3558} #faqPage .side-menu a:hover{background:#f1f8fb} #faqPage .side-menu a.active{background:linear-gradient(90deg,#0a7389,#0a8a9d);color:#fff;font-weight:600} #faqPage .side-menu a.active .num{color:#fff} #faqPage .side-menu .menu-chev{font-size:18px;font-weight:700;line-height:1;text-align:right} /* Expand all and Collapse all. Kept from the previous page, dressed to sit between the menu and the contact card. */ #faqPage .faq-tools{display:flex;gap:8px} #faqPage .faq-tool{flex:1;background:#fff;border:1px solid var(--line,#dbe7ee);color:#1f3558; font-family:inherit;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; padding:10px 8px;border-radius:6px;cursor:pointer;transition:background .15s,color .15s,border-color .15s} #faqPage .faq-tool:hover{background:#0a7f95;border-color:#0a7f95;color:#fff} /* The sidebar contact card was removed on 20 September 2026. The same invitation already runs as a full band at the foot of the FAQ, and the card repeated it three inches away. Its rules went with the markup. */ /* Sections and the accordion. */ #faqPage .faq-block{scroll-margin-top:96px} #faqPage .faq-block + .faq-block{margin-top:30px} #faqPage .section-eyebrow{text-transform:uppercase;letter-spacing:.18em;font-size:10.5px;font-weight:800;color:#0a6f86} #faqPage .section-title{font-family:var(--serif,"DM Serif Display",Georgia,serif);font-weight:400; font-size:30px;line-height:1.1;color:var(--navy,#071a3d);margin:6px 0 4px;letter-spacing:-.02em} #faqPage .section-sub{color:#56698a;font-size:13.5px;margin-bottom:16px} #faqPage .accordion{display:grid;gap:6px} #faqPage .faq-item{background:#fff;border:1px solid var(--line,#dbe7ee);border-radius:6px;overflow:hidden; transition:border-color .15s,box-shadow .15s} #faqPage .faq-item:hover{border-color:#c4d8e3} #faqPage .faq-item:not(.collapsed){box-shadow:0 8px 20px -16px rgba(7,26,61,.35)} #faqPage .faq-q{display:flex;gap:12px;align-items:center;padding:12px 16px;cursor:pointer; color:var(--navy,#071a3d);font-size:15.5px;font-weight:600;line-height:1.4} #faqPage .faq-item:not(.collapsed) .faq-q{background:#f3f8fb} #faqPage .faq-q:focus-visible{outline:2px solid #0a7f95;outline-offset:-2px} /* Drawn chevron. It points right when shut and down when open. The glyphs the export used sit at different heights in Sora, so it is drawn instead. */ #faqPage .chev{flex:none;width:8px;height:8px;margin:0 2px 0 1px;border-right:2.2px solid #0a7f95; border-bottom:2.2px solid #0a7f95;transform:rotate(-45deg);transition:transform .18s} #faqPage .faq-item:not(.collapsed) .chev{transform:rotate(45deg) translate(-2px,-2px)} #faqPage .faq-a{padding:10px 18px 16px 38px;color:#4a5f80;font-size:13px;line-height:1.6} #faqPage .faq-item.collapsed .faq-a,#faqPage .faq-a[hidden]{display:none} #faqPage .faq-a strong{color:#1f3558} #faqPage .faq-a ul{margin:10px 0 0;padding:0 0 0 18px;display:grid;gap:5px} /* Closing band. Same treatment as the hero, photo on the right fading in. */ #faqPage .cta-band{position:relative;overflow:hidden;background:linear-gradient(90deg,#edf5fc,#f4f9fd)} #faqPage .cta-band .container{display:grid;grid-template-columns:46% 54%;align-items:stretch; min-height:200px;padding-left:60px} #faqPage .cta-copy{align-self:center;padding:28px 24px 28px 0;position:relative;z-index:2} #faqPage .cta-copy .eyebrow{color:#0a6f86} #faqPage .cta-copy h2{font-family:var(--serif,"DM Serif Display",Georgia,serif);font-weight:400; font-size:38px;line-height:1.05;color:var(--navy,#071a3d);margin:8px 0 6px} #faqPage .cta-copy p{color:#4f6585;font-size:14px;margin:0 0 16px} #faqPage .btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--navy2,#062746); color:#fff;border-radius:6px;padding:12px 22px;font-weight:700;font-size:13px;transition:background .15s} #faqPage .btn-primary:hover{background:#0a3a63} #faqPage .footer-art{position:relative;min-height:200px;margin-right:calc(-1 * var(--bleed,0px))} #faqPage .footer-image{position:absolute;inset:0;width:100%;height:100%;max-width:none; object-fit:cover;object-position:center 30%; mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 18%,#000 45%); -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 18%,#000 45%)} @media(max-width:1080px){ #faqPage .hero,#faqPage .cta-band .container{padding-left:32px} #faqPage .main-layout{padding:12px 32px 36px;grid-template-columns:200px minmax(0,1fr);gap:26px} #faqPage .hero h1{font-size:44px} } @media(max-width:860px){ #faqPage .hero,#faqPage .cta-band .container{grid-template-columns:1fr;padding:0} #faqPage .hero-copy,#faqPage .cta-copy{padding:28px 20px} #faqPage .hero-art{min-height:220px;margin-right:0} #faqPage .hero-image{mask-image:none;-webkit-mask-image:none} #faqPage .hero-art .script{left:16px;top:14px;height:72px} #faqPage .hero h1{font-size:38px} #faqPage .main-layout{grid-template-columns:1fr;padding:18px 16px 30px;gap:22px} #faqPage .sidebar{position:static} #faqPage .side-menu a{min-height:44px} #faqPage .footer-art{display:none} #faqPage .cta-copy h2{font-size:32px} } @media(prefers-reduced-motion:reduce){ #faqPage .chev,#faqPage .faq-item,#faqPage .side-menu a{transition:none} } /* ---------- HEADER NAV, 26 SEPTEMBER 2026 ---------- Option A from the nav mockups: the four links sit in one tray, each with its icon, and the current page is a white pill. The header's hairline became a soft shadow and the three colour brand rule underneath, so the header has a hard edge against the page. Scoped by id so no class rule in either stylesheet can take it back, whatever the load order. Teal text here is #0a7f95, the switcher kicker value. --teal (#0a97a8) is about 3.5:1 on white and fails AA for text this size, so it is kept for fills and rules only. */ #siteHeader{border-bottom:0;box-shadow:0 4px 14px rgba(23,53,94,.07)} #siteHeader::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:4px;pointer-events:none; background:linear-gradient(90deg,var(--teal) 0 33.34%,var(--violet) 33.34% 66.67%,var(--navy2) 66.67% 100%)} #siteNav{gap:0;margin-left:28px} #siteNav .nav-tray{display:flex;align-items:center;gap:4px;padding:4px;background:#eef4f8; border:1px solid #cddae4;border-radius:999px} #siteNav .header-link{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;margin:0; border:0;border-radius:999px;background:transparent;color:#17355e;font-size:14px;font-weight:600; line-height:1;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s} #siteNav .header-link::after{content:none} #siteNav .header-link:hover{background:rgba(255,255,255,.75);color:var(--navy)} #siteNav .header-link.is-current, #siteNav .header-link.is-current:hover{background:#fff;color:#0a7f95;font-weight:700; box-shadow:0 1px 2px rgba(23,53,94,.12),0 3px 8px rgba(23,53,94,.08)} #siteNav .header-link:focus-visible{outline:2px solid #0a7f95;outline-offset:2px} #siteNav .nav-ico{width:17px;height:17px;flex:none} /* The current page goes to 700, and a bolder word is a wider word. The label reserves its own width at 700 in a zero height second row, so the tray is laid out once and moving the current page moves nothing. */ #siteNav .nav-lbl{display:inline-grid} #siteNav .nav-lbl::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:700} /* Icons come off first, then the nav drops to its own centred line. The header grows rather than holding a height its contents cannot live in. */ @media(max-width:1180px){ #siteNav .nav-ico{display:none} } @media(max-width:980px){ #siteHeader{height:auto;min-height:72px} #siteHeader .header-inner{flex-wrap:wrap;height:auto;row-gap:10px;column-gap:12px;padding-top:12px;padding-bottom:12px} #siteNav{order:3;flex:1 0 100%;margin-left:0;justify-content:center} } @media(max-width:560px){ #siteNav .header-link{height:44px;padding:0 12px;font-size:13.5px} /* 29 Sep 2026, Spiller: the tray read cramped on a phone. 10px more on each side and the links spaced 10px apart. */ #siteNav .nav-tray{padding:4px 14px;gap:10px} } @media(max-width:380px){ #siteNav .header-link{padding:0 9px;font-size:12.5px} } /* ---------- HOME CARDS, 26 SEPTEMBER 2026 ---------- The three cards lost their figure lists and gained the site's own icons in place of the text glyphs. */ .circle-icon svg{width:22px;height:22px} /* ---------- HOW IT WORKS, THE WALKTHROUGH, 26 SEPTEMBER 2026 ---------- Four slides that play in turn. Desktop: the step list on the left, the slide on the right. Below 760: the list hides, each slide shows its own step heading above its animation, and four bars stand in for the list. No figures anywhere. Fills are shapes and locked lines read as dots, the same as the live packet. Scoped by id. */ @keyframes hw-fill{from{width:0}to{width:100%}} @keyframes hw-grow{from{width:0}} @keyframes hw-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes hw-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}} #how.how-section{padding:56px 48px 64px} #how .how-head{align-items:flex-end} #how .how-head h2{font-size:34px;margin:0 0 6px;color:var(--navy)} #how .how-head p{font-size:16px;margin:0;color:#5a6d8e} #how .hw{display:grid;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:48px;margin-top:36px;align-items:start} #how .hw-steps{list-style:none;margin:0;padding:0;display:grid;gap:6px} #how .hw-step{width:100%;display:flex;gap:18px;align-items:flex-start;text-align:left;padding:16px 18px; border-radius:14px;border:1px solid transparent;background:transparent;color:inherit;cursor:pointer; transition:background .2s,border-color .2s,box-shadow .2s} #how .hw-step:hover{background:#f7fbfd} #how .hw-step.is-on{background:#f5f9fb;border-color:#d8e5ec;box-shadow:0 4px 14px rgba(23,53,94,.07)} #how .hw-step:focus-visible{outline:2px solid #0a7f95;outline-offset:2px} #how .hw-num{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center; font-size:17px;font-weight:800;background:#e6f4f5;color:#0a7f95;transition:background .3s,color .3s,box-shadow .3s} #how .hw-step.is-on .hw-num,#how .hw-step.is-done .hw-num,#how .hw-slide-head .hw-num{background:#0a7f95;color:#fff} #how .hw-step.is-on .hw-num,#how .hw-slide-head .hw-num{box-shadow:0 0 0 6px rgba(10,151,168,.15)} #how .hw-txt{display:grid;gap:5px;flex:1;min-width:0} #how .hw-txt strong{font-size:17px;line-height:1.3;color:#3a4d66} #how .hw-step.is-on .hw-txt strong,#how .hw-slide-head .hw-txt strong{color:var(--navy)} #how .hw-txt>span{font-size:14px;line-height:1.5;color:#5a6d8e} #how .hw-bar{display:block;height:3px;margin-top:6px;border-radius:2px;background:#e3edf2;overflow:hidden} #how .hw-bar i{display:block;height:100%;width:0;background:var(--teal)} #how .hw-step.is-done .hw-bar i{width:100%} #how .hw-step.is-on .hw-bar i{animation:hw-fill 5s linear forwards} #how .hw.is-paused .hw-bar i,#how .hw.is-paused .hw-dots i::after{animation-play-state:paused} #how .hw-dots{display:none} #how .hw-stage{position:relative;height:560px;overflow:hidden} #how .hw-slide{position:absolute;inset:0;display:flex;flex-direction:column;gap:16px; transform:translateX(104%);visibility:hidden;transition:none} #how .hw-slide.is-active{transform:none;visibility:visible;transition:transform .6s cubic-bezier(.4,0,.2,1)} #how .hw-slide.is-out{transform:translateX(-104%);visibility:visible;transition:transform .6s cubic-bezier(.4,0,.2,1)} #how .hw-slide-head{display:none} #how .hw-frame{flex:1;min-height:0;display:flex;background:#f3f8fb;border:1px solid #d8e5ec;border-radius:20px;padding:24px} #how .hw-window{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden;background:#fff; border:1px solid #d8e5ec;border-radius:13px;box-shadow:0 12px 32px rgba(23,53,94,.10)} #how .hw-chrome{height:50px;flex:none;display:flex;align-items:center;justify-content:space-between; padding:0 20px;border-bottom:1px solid #e8f0f4} #how .hw-chrome img{width:78px;height:auto} #how .hw-chrome span{font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#0a7f95} #how .hw-pane{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:24px 28px;overflow:hidden} #how .hw-pane h3{margin:0;font-size:20px;color:var(--navy)} #how .hw-pane h3 small{font-size:14px;font-weight:600;color:#5a6d8e} /* Motion. Items rise in one after another while the slide travels in, then hold. A slide on its way out keeps its last frame. */ #how .hw-slide.is-active .hw-in,#how .hw-slide.is-out .hw-in{animation:hw-up .5s ease-out both} #how .hw-pane>.hw-in:nth-child(2){animation-delay:.45s} #how .hw-pane>.hw-in:nth-child(3){animation-delay:.6s} #how .hw-pane>.hw-in:nth-child(4){animation-delay:.75s} #how .hw-pane>.hw-in:nth-child(5){animation-delay:.9s} #how .hw-pane>.hw-in:nth-child(6){animation-delay:1.05s} #how .hw-pane>.hw-in:nth-child(7){animation-delay:1.2s} #how .hw-pane>.hw-in:nth-child(1){animation-delay:.3s} /* Step 1, the form filling in */ #how .hw-field{display:grid;gap:6px} #how .hw-lbl{font-size:13px;font-weight:700;color:#263c5f} #how .hw-input{height:44px;display:flex;align-items:center;gap:12px;padding:0 14px;border:1px solid #cbdce6;border-radius:8px} #how .hw-input svg{width:18px;height:18px;flex:none;color:var(--blue)} #how .hw-type{display:block;height:10px;border-radius:5px;background:#cfe3ea} #how .hw-p0 .hw-field:nth-child(2) .hw-type{width:58%} #how .hw-p0 .hw-field:nth-child(3) .hw-type{width:40%} #how .hw-p0 .hw-field:nth-child(4) .hw-type{width:22%} #how .hw-p0 .hw-field:nth-child(5) .hw-type{width:46%} #how .is-active .hw-type,#how .is-out .hw-type{animation:hw-grow .9s cubic-bezier(.2,.7,.2,1) both} #how .hw-p0 .hw-field:nth-child(2) .hw-type{animation-delay:.8s} #how .hw-p0 .hw-field:nth-child(3) .hw-type{animation-delay:1.1s} #how .hw-p0 .hw-field:nth-child(4) .hw-type{animation-delay:1.4s} #how .hw-p0 .hw-field:nth-child(5) .hw-type{animation-delay:1.7s} /* Step 2, the plan filling up */ #how .hw-p1{gap:12px} #how .hw-row{display:flex;align-items:center;gap:14px} #how .hw-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:9px;background:#e6f4f5;color:#0a7f95} #how .hw-ico svg{width:18px;height:18px} #how .hw-name{width:230px;flex:none;font-size:15px;font-weight:700;color:var(--navy)} #how .hw-track{flex:1;height:8px;border-radius:4px;background:#eef4f8;overflow:hidden} #how .hw-track i{display:block;height:100%;border-radius:4px;background:var(--teal)} #how .hw-p1 .hw-row:nth-child(2) .hw-track i{width:84%} #how .hw-p1 .hw-row:nth-child(3) .hw-track i{width:72%} #how .hw-p1 .hw-row:nth-child(4) .hw-track i{width:66%} #how .hw-p1 .hw-row:nth-child(5) .hw-track i{width:58%} #how .hw-p1 .hw-row:nth-child(6) .hw-track i{width:76%} #how .hw-p1 .hw-row:nth-child(7) .hw-track i{width:62%} #how .hw-check{width:20px;height:20px;flex:none;color:#0a7f95} #how .is-active .hw-track i,#how .is-out .hw-track i{animation:hw-grow .9s cubic-bezier(.2,.7,.2,1) both} #how .is-active .hw-check,#how .is-out .hw-check{animation:hw-pop .35s ease-out both} #how .hw-p1 .hw-row:nth-child(2) i{animation-delay:.7s} #how .hw-p1 .hw-row:nth-child(2) .hw-check{animation-delay:1.4s} #how .hw-p1 .hw-row:nth-child(3) i{animation-delay:.95s} #how .hw-p1 .hw-row:nth-child(3) .hw-check{animation-delay:1.65s} #how .hw-p1 .hw-row:nth-child(4) i{animation-delay:1.2s} #how .hw-p1 .hw-row:nth-child(4) .hw-check{animation-delay:1.9s} #how .hw-p1 .hw-row:nth-child(5) i{animation-delay:1.45s} #how .hw-p1 .hw-row:nth-child(5) .hw-check{animation-delay:2.15s} #how .hw-p1 .hw-row:nth-child(6) i{animation-delay:1.7s} #how .hw-p1 .hw-row:nth-child(6) .hw-check{animation-delay:2.4s} #how .hw-p1 .hw-row:nth-child(7) i{animation-delay:1.95s} #how .hw-p1 .hw-row:nth-child(7) .hw-check{animation-delay:2.65s} /* Step 3, the locked packet, drawn the way the live preview draws it */ #how .hw-sheet-head{display:flex;align-items:center;gap:12px} #how .hw-sheet-t{flex:1;display:grid;gap:2px} #how .hw-sheet-t em{font-style:normal;font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#0a7f95} #how .hw-sheet-t b{font-size:20px;color:var(--navy)} #how .hw-stamp{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#5a6d8e; border:1px solid #ccdbe5;border-radius:6px;padding:5px 9px} #how .hw-unlock{background:var(--violet);color:#fff;border-radius:8px;padding:11px 16px;font-size:13px;font-weight:800;white-space:nowrap} #how .is-active .hw-unlock,#how .is-out .hw-unlock{animation:hw-pop .35s ease-out 1.2s both} #how .hw-sec{border:1px solid #d8e5ec;border-radius:10px;overflow:hidden} #how .hw-sec-h{display:flex;align-items:center;gap:12px;padding:12px 18px;background:var(--navy)} #how .hw-sec-h b{flex:1;font-size:15px;color:#fff} #how .hw-chip{background:rgba(111,212,218,.16);color:#6fd4da;border:1px solid rgba(111,212,218,.55); border-radius:99px;padding:6px 12px;font-size:11px;font-weight:800;letter-spacing:.03em;white-space:nowrap} #how .hw-held{display:flex;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid #e8f0f4; font-size:14px;font-weight:600;color:var(--navy)} #how .hw-held span{width:64px;flex:none;font-size:18px;font-weight:800;letter-spacing:.08em;color:#9aabbd} /* Step 4, the export block, copied from the live one */ #how .hw-p3{max-width:460px;gap:10px} #how .hw-exp-t{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#5a6d8e} #how .hw-exp{display:flex;align-items:center;gap:12px;padding:13px 15px;border:1px solid #ccdbe5;border-radius:9px;background:#fff} #how .hw-exp svg{width:20px;height:20px;flex:none;fill:none;stroke:var(--teal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round} #how .hw-exp b{flex:1;font-size:15px;color:var(--ink)} #how .hw-exp span{font-size:13px;font-weight:600;color:#71819a} #how .hw-note{margin:2px 0 0;font-size:13px;color:#71819a} /* Phone. One step at a time: heading above, its animation under it, and the pair slides in together while the last pair slides out. */ @media(max-width:760px){ #how.how-section{padding:40px 16px 44px} #how .how-head{flex-direction:column;align-items:flex-start;gap:4px} #how .how-head h2{font-size:30px} #how .how-head p{font-size:15px} #how .hw{grid-template-columns:1fr;gap:8px;margin-top:12px} #how .hw-steps{display:none} #how .hw-dots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} #how .hw-dots button{height:44px;padding:0;border:0;background:none;display:flex;align-items:center;cursor:pointer} #how .hw-dots i{position:relative;display:block;width:100%;height:4px;border-radius:2px;background:#e3edf2;overflow:hidden} #how .hw-dots i::after{content:"";position:absolute;left:0;top:0;bottom:0;width:0;background:var(--teal)} #how .hw-dots .is-done i::after{width:100%} #how .hw-dots .is-on i::after{animation:hw-fill 5s linear forwards} #how .hw-dots button:focus-visible{outline:2px solid #0a7f95;outline-offset:2px} #how .hw-stage{height:590px} #how .hw-slide-head{display:flex;gap:14px;align-items:flex-start;flex:none} #how .hw-slide-head .hw-num{width:44px;height:44px;box-shadow:0 0 0 5px rgba(10,151,168,.15)} #how .hw-slide-head .hw-txt strong{font-size:18px} #how .hw-frame{padding:12px;border-radius:16px} #how .hw-chrome{height:44px;padding:0 14px} #how .hw-chrome img{width:66px} #how .hw-pane{padding:18px 16px;gap:12px} #how .hw-pane h3,#how .hw-sheet-t b{font-size:17px} #how .hw-name{width:122px;font-size:13px;line-height:1.25} #how .hw-ico{width:30px;height:30px} #how .hw-ico svg{width:16px;height:16px} #how .hw-track{height:6px} #how .hw-stamp{display:none} #how .hw-unlock{padding:10px 12px;font-size:12.5px} #how .hw-sec-h{padding:10px 12px} #how .hw-sec-h b{font-size:13px} #how .hw-chip{padding:5px 9px;font-size:10px} #how .hw-held{padding:10px 12px;font-size:13px;gap:10px} #how .hw-held span{width:44px;font-size:15px} #how .hw-exp{padding:12px} #how .hw-exp b{font-size:14.5px} } @media(prefers-reduced-motion:reduce){ #how .hw-slide,#how .hw-slide.is-active,#how .hw-slide.is-out{transition:none} #how .hw-in,#how .hw-type,#how .hw-track i,#how .hw-check,#how .hw-unlock,#how .hw-bar i,#how .hw-dots i::after{animation:none!important} #how .hw-step.is-on .hw-bar i,#how .hw-dots .is-on i::after{width:100%} #how .hw-num,#how .hw-step,#siteNav .header-link{transition:none} } /* ---------- HOME PRICING CARDS, 26 SEPTEMBER 2026 ---------- The price and button row sits at the foot of each card, so the two rows line up whatever the copy wraps to. Line counts differ by width (measured: 2 and 2 from 1366 up, 3 and 2 at 1100 to 1280, 4 and 3 at 1000), so evening the copy could only ever hold at one width. The two buttons now share one height and size; the schematic button had no background set and painted the browser's default grey. The !important matches the .dark-btn rules in this file, which set padding the same way. */ #aboutPage .home-pricing .price-card.compact{display:flex;flex-direction:column} #aboutPage .home-pricing .price-card.compact .price-row{margin-top:auto} #aboutPage .home-pricing .price-row .dark-btn.small, #aboutPage .home-pricing .price-row .outline-btn{display:inline-flex;align-items:center;justify-content:center; height:44px;padding:0 18px!important;font-size:13px;font-weight:700!important;line-height:1;white-space:nowrap} #aboutPage .home-pricing .price-row .outline-btn{background:#fff;color:var(--navy2);border:1px solid #8aa0b9;border-radius:8px} #aboutPage .home-pricing .price-row .outline-btn:hover{border-color:var(--navy2);background:#f5f9fb} #aboutPage .home-pricing .price-row .outline-btn:focus-visible, #aboutPage .home-pricing .price-row .dark-btn.small:focus-visible{outline:2px solid #0a7f95;outline-offset:2px} /* ---------- HOME SCRIPTS, 26 SEPTEMBER 2026 ---------- Both home scripts were rendering at the width of their column rather than their set height. #aboutPage img{height:auto} in the first style block of index.html outranks .cta-note .script-note{height:84px} and .band-script{height:96px} on the id, and .final-cta img and .packet-band img (meant for the photographs) handed the scripts width:100% and, on the closing band, the photograph's left fade mask, which is why "Less" faded out. Pinned here at id strength. The closing script went from 84px to 112px on 26 September, when 84 read too small. */ #aboutPage .final-cta .cta-note .script-note{height:112px;width:auto;max-width:none;max-height:none;margin:0; -webkit-mask-image:none;mask-image:none} /* The closing photo is sized to itself, so its fade lands on the picture. It was a full column wide with object-fit:contain, which parked the picture at the right of an empty box and ran the fade across the empty part, so the photo met the band on a hard edge. 300px tall at its own 5:4 ratio, fading in from the left the way the FAQ hero does. It ends at the band's own edge: the band clips with overflow:hidden, so the old bleed past it never showed. The script sits over the faded edge. */ #aboutPage .final-cta>img{width:auto;height:300px;max-width:none;max-height:none;justify-self:end;align-self:end;margin-right:0; object-fit:cover;object-position:center top; -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 18%,#000 42%); mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.45) 18%,#000 42%)} #aboutPage .final-cta .cta-note{left:auto;right:285px} #aboutPage .packet-band .band-script{height:96px;width:auto;max-width:100%;max-height:none} /* The plan card goes back to where it sat before the callouts came off. */ #aboutPage .hero-plan{left:auto;right:5%;top:41%;bottom:auto} @media(max-width:1180px){ #aboutPage .final-cta .cta-note{right:230px} #aboutPage .final-cta .cta-note .script-note{height:88px} } /* ---------- PRICING PAGE CARDS, 26 SEPTEMBER 2026 ---------- The schematic card's closing paragraph and the rule above it came out, and a Get the schematic button took their place. It starts a packet exactly as Build your packet does, sign in gate included. Both buttons sit at the foot of their cards so they line up whatever each list runs to. */ #pricingPage .pricing-cards .price-card{display:flex;flex-direction:column} #pricingPage .pricing-cards .price-card .pricing-cta{margin-top:auto;align-self:flex-start} /* sept27-1: the hero callouts were white on a near white scene with only a soft shadow, so their edges vanished (worst on Check-in Positions, top right). Option B: a pale blue tint, a hairline border and a firmer two layer shadow. */ #aboutPage .hero-callout{background:#f3f8fc;border:1px solid #c9dbe8; box-shadow:0 2px 4px rgba(12,38,72,.08),0 12px 28px rgba(12,38,72,.16)} /* The small line under each figure was #7a8ba6, 3.5:1 on white and 3.2:1 on the tint, below AA. #5a6d8e is the packet's muted ink, 4.9:1 here. */ #aboutPage .co-t small{color:#5a6d8e} /* sept27-2: the pricing page was held to 1120px by .pricing-page{width:min(1120px,calc(100% - 32px))} in the second style block of index.html, so its hero sat 300px narrower than the FAQ hero (1420px) and jumped when switching tabs. Same width as the FAQ and home pages now, edge to edge below 1420 as they are. */ #pricingPage{width:100%;max-width:1420px} /* sept27-3: the closing script at 112px read as if it had drifted into the fade. Option B: 156px, nudged left so it fills the faded edge of the photo and reads as placed. Steps down to 136px at 1320, 120px at 1180 and 100px at 1060 so it keeps at least 40px clear of the text as the column closes in. */ #aboutPage .final-cta .cta-note .script-note{height:156px} #aboutPage .final-cta .cta-note{right:265px} @media(max-width:1320px){ #aboutPage .final-cta .cta-note .script-note{height:136px} #aboutPage .final-cta .cta-note{right:250px} } @media(max-width:1180px){ #aboutPage .final-cta .cta-note .script-note{height:120px} #aboutPage .final-cta .cta-note{right:225px} } @media(max-width:1060px){ #aboutPage .final-cta .cta-note .script-note{height:100px} #aboutPage .final-cta .cta-note{right:215px} } /* ---------- NEW PACKET, MID WIDTHS, 27 SEPTEMBER 2026 (sept27-4) ---------- From 1180 down to 901 the guide (230px) and Your plan (260px) kept their widths and the form took all the squeeze: at 1000 each field was 143px. Tamora's choice, a blend of the mocked C and A: the planner notes become a strip across the top of the form column, the lobby photo is dropped there, and Your plan stays on the right at a slimmer 210px. The form gets the rest and keeps two fields a row. The review step has its own one column layout, so it is left alone. Below 901 the existing single column takes over. */ @media(min-width:901px) and (max-width:1180px){ #plannerGrid:not(.reviewing){grid-template-columns:minmax(0,1fr) 210px;grid-template-rows:auto 1fr;gap:14px} #plannerGrid:not(.reviewing) #guideCard{grid-column:1;grid-row:1;min-height:0;height:auto;padding-bottom:22px} #plannerGrid:not(.reviewing) #guideCard>img{display:none} #plannerGrid:not(.reviewing) #formCard{grid-column:1;grid-row:2} #plannerGrid:not(.reviewing) #planCard{grid-column:2;grid-row:1 / span 2} } /* Phones: index.html sets .fields to one column below 581, but site.css loads later and its .fields{grid-template-columns:1fr 1fr} won at equal strength, so a 390 phone showed two fields a row at 126px each. */ @media(max-width:580px){#plannerGrid .fields{grid-template-columns:1fr}} /* sept27-5: "A clearer plan. A smoother event." on the New Packet heading was 52px and pinned to the far right, so it read as stray. Option C, with the extra tilt dropped: 128px, centred on the heading, pulled in from the right edge, keeping the scribble's own -4deg. Steps down as the heading narrows. */ #plannerPage .planner-heading{align-items:center} #plannerPage .planner-heading .scribble{margin-right:8%;flex:none} #plannerPage .planner-heading .script-note{height:128px;width:auto;max-width:none} @media(max-width:1100px){ #plannerPage .planner-heading .scribble{margin-right:4%} #plannerPage .planner-heading .script-note{height:104px} } @media(max-width:760px){ #plannerPage .planner-heading .script-note{height:80px} } /* ---------- PHONE DRAWER EXPORTS, 27 SEPTEMBER 2026 (sept27-9) ---------- The export buttons drew no border and sat against the sheet's left edge. Their border and caption colours were var(--line-strong) and var(--muted-soft), two variables defined nowhere, so the borders never painted, and the block had no side padding of its own. Real colours, a 16px inset matching the section rows, and a card per button so each reads as something to tap. */ #pcSheet .pc-exports{margin:16px 16px 0;padding:16px 0 calc(16px + env(safe-area-inset-bottom,0px));border-top:1px solid #dbe6ed} #pcSheet .pc-exports-h{color:#5a6d8e;letter-spacing:.14em} #pcSheet .pc-exports-grid{gap:10px} #pcSheet .pc-exports-grid button{min-height:60px;padding:12px 14px;border:1px solid #c9d6e2;border-radius:10px; background:#fff;color:#071a3d;box-shadow:0 1px 2px rgba(7,26,61,.06)} #pcSheet .pc-exports-grid button:first-child{background:#071a3d;border-color:#071a3d;color:#fff} #pcSheet .pc-exports-grid button .sub{color:#5a6d8e;font-weight:600} #pcSheet .pc-exports-grid button:first-child .sub{color:rgba(255,255,255,.75)} #pcSheet .pc-exports-grid button:active{transform:translateY(1px)} #pcSheet .pc-exports-grid button:focus-visible{outline:2px solid #0a7f95;outline-offset:2px} #pcSheet .pc-exports-note{color:#5a6d8e;margin-top:12px} /* ---------- THE PHOTOGRAPH IN THE NAVY PANEL, 27 SEPTEMBER 2026 ---------- The rebrand mockup had a photograph in the account page's navy panel, fading into the blue from the lower right. It was listed as unbuilt on 17 September because no image existed. Tamora's image, placed lower right, faded out toward the top and left so the heading, the terms and the script stay on plain navy. */ #accountPage .account-dark{position:relative;overflow:hidden;isolation:isolate} #accountPage .account-dark::after{content:'';position:absolute;right:0;bottom:0;width:62%;height:78%;z-index:-1; background:url('assets/images/tamrey-event-tech-bg-02-qr-checkin.png') right bottom/cover no-repeat; opacity:.55; -webkit-mask-image:linear-gradient(to left,#000 30%,transparent 100%),linear-gradient(to top,#000 40%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to left,#000 30%,transparent 100%),linear-gradient(to top,#000 40%,transparent 100%); mask-composite:intersect;pointer-events:none} @media(max-width:760px){#accountPage .account-dark::after{width:100%;height:55%;opacity:.4}} /* ---------- ACCOUNT LOBBY BAND, 27 SEPTEMBER 2026 (sept27-10) ---------- New text free photograph, so the "Less busywork" script came off. A soft veil of the page colour over it, heavier at the top and the two ends, so the band settles into the page instead of sitting on it as a hard rectangle. */ #accountPage .account-lobby{position:relative} #accountPage .account-lobby::after{content:'';position:absolute;inset:0;pointer-events:none; background: linear-gradient(180deg,rgba(247,251,253,.78) 0%,rgba(247,251,253,.32) 30%,rgba(247,251,253,.14) 65%,rgba(247,251,253,.38) 100%), linear-gradient(90deg,rgba(247,251,253,.6) 0%,rgba(247,251,253,0) 16%,rgba(247,251,253,0) 84%,rgba(247,251,253,.6) 100%)} /* ---------- ACCOUNT HERO PHOTO FADE, 27 SEPTEMBER 2026 ---------- The hero photograph sat on the page as a hard edged rectangle. A mask on the photo alone fades it into the section: a wide fade on the left where it meets the copy, and a soft feather on the top, bottom and right. The right feather stops short of the "Event tech, planned right." sign in the photo. The handwritten script is its own image with mask-image:none, so it stays crisp, and the headline is untouched. Stacked on narrow screens the photo sits under the copy, so the fade turns vertical. */ #accountPage .account-hero > img:not(.hero-script){ -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 24%,#000 97%,transparent 100%), linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%); -webkit-mask-composite:source-in; mask-image:linear-gradient(to right,transparent 0%,#000 24%,#000 97%,transparent 100%), linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%); mask-composite:intersect} @media(max-width:900px){ #accountPage .account-hero > img:not(.hero-script){ -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 94%,transparent 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 22%,#000 94%,transparent 100%)} }