/* FlashedRouter — keepyourhomeip.co Tokens: ink #0E1420, ink-2 #16223A, paper #F5F1E8, paper-2 #EAE3D3, signal #FF7A33 (accent/CTA), online #2BD97C (status only) Fonts are loaded via in each page's (preconnect + stylesheet), not @import here — @import is render-blocking and delays first paint. */ :root{ --ink:#0E1420; --ink-2:#16223A; --paper:#F5F1E8; --paper-2:#EAE3D3; --signal:#FF7A33; --signal-dim:#c95f22; --online:#2BD97C; --slate:#5B6B8C; --line:rgba(255,255,255,.12); --line-dark:rgba(14,20,32,.12); --ink-text:#E9EBF0; --body-text:#232A38; --max:1180px; --serif:"Fraunces", Georgia, serif; --sans:"Inter", -apple-system, BlinkMacSystemFont, sans-serif; --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; } *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important;} } body{ margin:0; font-family:var(--sans); color:var(--body-text); background:var(--paper); -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,svg{max-width:100%;display:block;} a{color:inherit;} .wrap{max-width:var(--max);margin:0 auto;padding:0 28px;} :focus-visible{outline:2px solid var(--signal);outline-offset:3px;} /* Buttons */ .btn{ display:inline-flex;align-items:center;gap:8px; font-family:var(--sans);font-weight:600;font-size:.95rem; padding:13px 24px;border-radius:100px;border:1px solid transparent; cursor:pointer;text-decoration:none;transition:transform .15s ease, background .15s ease, border-color .15s ease; white-space:nowrap; } .btn:hover{transform:translateY(-1px);} .btn-primary{background:var(--signal);color:#1a0f06;} .btn-primary:hover{background:#ff8a4d;} .btn-ghost{background:transparent;color:var(--ink-text);border-color:var(--line);} .btn-ghost:hover{border-color:var(--signal);} .btn-dark{background:var(--ink);color:var(--paper);} .btn-dark:hover{background:var(--ink-2);} /* Nav */ .nav{ position:sticky;top:0;z-index:50; background:rgba(14,20,32,.85);backdrop-filter:blur(10px); border-bottom:1px solid var(--line); } .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;} .brand{display:flex;align-items:center;gap:10px;font-weight:700;color:var(--ink-text);text-decoration:none;font-size:1.05rem;letter-spacing:-.01em;} .brand-mark{width:11px;height:11px;border-radius:3px;background:var(--online);box-shadow:0 0 0 3px rgba(43,217,124,.18);flex-shrink:0;} .nav-links{display:flex;align-items:center;gap:32px;list-style:none;margin:0;padding:0;} .nav-links a{color:var(--slate);text-decoration:none;font-size:.92rem;font-weight:500;transition:color .15s;} .nav-links a:hover{color:var(--ink-text);} .nav-cta{display:flex;align-items:center;gap:14px;} .nav-toggle{display:none;background:none;border:none;color:var(--ink-text);font-size:1.5rem;cursor:pointer;} @media (max-width:860px){ .nav-links{position:fixed;top:72px;left:0;right:0;background:var(--ink);flex-direction:column;align-items:flex-start;padding:22px 28px 28px;gap:18px;border-bottom:1px solid var(--line);transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s, transform .2s;} .nav-links.open{opacity:1;transform:translateY(0);pointer-events:auto;} .nav-toggle{display:block;} .nav-cta .btn-ghost{display:none;} } /* Hero */ .hero{ background:radial-gradient(120% 140% at 14% -10%, #1c2947 0%, var(--ink) 55%); color:var(--ink-text); padding:88px 0 64px; position:relative; overflow:hidden; } .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;} .eyebrow{ font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase; color:var(--signal);display:inline-flex;align-items:center;gap:8px;margin-bottom:22px; } .eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--online);} .hero h1{ font-family:var(--serif);font-weight:500;font-size:clamp(2.4rem,4.6vw,3.7rem); line-height:1.04;letter-spacing:-.02em;margin:0 0 22px; } .hero h1 em{font-style:italic;color:var(--signal);} .hero p.lede{font-size:1.12rem;line-height:1.6;color:#B9C1D4;max-width:46ch;margin:0 0 34px;} .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:36px;} .hero-fine{font-family:var(--mono);font-size:.78rem;color:var(--slate);} /* Tunnel signature graphic */ .tunnel-card{ background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:20px; padding:30px 28px 26px; } .tunnel-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:22px;} .tunnel-node{text-align:center;flex:0 0 auto;} .tunnel-node .figure{width:44px;height:44px;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;border-radius:50%;} .tunnel-node .figure svg{width:36px;height:36px;} .tunnel-node.home .figure{background:radial-gradient(circle, rgba(43,217,124,.2) 0%, rgba(43,217,124,0) 72%);} .tunnel-node.you .figure{background:radial-gradient(circle, rgba(255,122,51,.2) 0%, rgba(255,122,51,0) 72%);} .tunnel-node span{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:var(--slate);text-transform:uppercase;} .tunnel-node strong{display:block;font-family:var(--sans);font-size:.88rem;color:var(--ink-text);margin-top:2px;} .tunnel-line{flex:1;height:2px;position:relative;margin:0 6px 22px;background-image:linear-gradient(90deg,var(--online) 0 6px,transparent 6px 12px);background-size:12px 2px;background-repeat:repeat-x;overflow:visible;} .tunnel-line::after{content:"";position:absolute;top:-3px;left:0;width:8px;height:8px;border-radius:50%;background:var(--signal);animation:travel 2.6s linear infinite;} @keyframes travel{0%{left:0;}100%{left:calc(100% - 8px);}} .tunnel-readout{ font-family:var(--mono);background:var(--ink);border:1px solid var(--line);border-radius:12px; padding:16px 18px;display:flex;align-items:center;justify-content:space-between; } .tunnel-readout .ip{color:var(--online);font-size:1.05rem;letter-spacing:.02em;} .tunnel-readout .loc{color:var(--slate);font-size:.82rem;} .tunnel-readout .loc b{color:var(--ink-text);font-weight:500;} .tunnel-caption{margin-top:14px;font-size:.8rem;color:var(--slate);text-align:center;} /* Ticker */ .ticker{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden;padding:13px 0;} .ticker-track{display:flex;gap:48px;white-space:nowrap;width:max-content;animation:scroll 26s linear infinite;font-family:var(--mono);font-size:.8rem;color:var(--slate);letter-spacing:.03em;} .ticker-track span{color:var(--ink-text);} @keyframes scroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* Section shells */ section{padding:96px 0;} .section-head{max-width:640px;margin:0 0 56px;} .section-head .eyebrow{color:var(--signal-dim);} .section-head.on-dark .eyebrow{color:var(--signal);} h2{font-family:var(--serif);font-weight:500;font-size:clamp(1.9rem,3.2vw,2.6rem);letter-spacing:-.015em;line-height:1.12;margin:0 0 16px;} .section-head p{font-size:1.05rem;line-height:1.6;color:var(--slate);margin:0;} /* Value cards */ .value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .value-card{background:#fff;border:1px solid var(--line-dark);border-radius:18px;padding:32px 28px;} .value-card .stat{font-family:var(--serif);font-size:2.5rem;font-weight:500;color:var(--ink);letter-spacing:-.02em;} .value-card .stat small{font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--slate);margin-left:4px;} .value-card h3{font-size:1rem;margin:14px 0 8px;font-weight:700;} .value-card p{margin:0;color:var(--slate);font-size:.94rem;line-height:1.55;} .value-card .icon{width:38px;height:38px;margin-bottom:18px;color:var(--signal);} /* Comparison table */ .compare-wrap{background:var(--ink);border-radius:22px;padding:44px;color:var(--ink-text);} .compare-wrap .section-head p{color:#B9C1D4;} table.compare{width:100%;border-collapse:collapse;font-size:.94rem;} table.compare th,table.compare td{text-align:left;padding:16px 14px;border-bottom:1px solid var(--line);} table.compare thead th{font-family:var(--mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--slate);font-weight:500;} table.compare thead th.us{color:var(--signal);} table.compare tbody th{font-weight:500;color:var(--ink-text);width:34%;} table.compare td{color:#B9C1D4;} table.compare td.us-cell{color:var(--online);font-weight:600;} table.compare tbody tr:last-child th, table.compare tbody tr:last-child td{border-bottom:none;} .compare-note{margin-top:20px;font-size:.78rem;color:var(--slate);} /* Humans / personas */ .persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .persona-card{background:var(--paper-2);border-radius:18px;padding:0;overflow:hidden;} .persona-art{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:linear-gradient(160deg,#EAE3D3,#DED2B5);} .persona-art svg{width:60%;height:60%;} .persona-body{padding:22px 24px 26px;} .persona-body .role{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--signal-dim);} .persona-body h3{font-size:1.05rem;margin:8px 0 8px;} .persona-body p{margin:0;font-size:.92rem;color:var(--slate);line-height:1.55;} /* Steps */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:step;position:relative;} .step{padding:0 26px;position:relative;} .step:not(:first-child){border-left:1px solid var(--line-dark);} .step .num{font-family:var(--mono);font-size:.85rem;color:var(--signal-dim);margin-bottom:14px;} .step h3{font-size:1.08rem;margin:0 0 10px;} .step p{color:var(--slate);font-size:.94rem;line-height:1.6;margin:0;} /* Pricing */ .pricing-card{ max-width:560px;margin:0 auto;background:#fff;border:1px solid var(--line-dark);border-radius:22px; padding:44px 40px;text-align:center; } .pricing-card .kit{font-family:var(--mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:var(--signal-dim);} .pricing-card .price{font-family:var(--serif);font-size:3.4rem;font-weight:500;margin:14px 0 4px;color:var(--ink);} .pricing-card .price sup{font-size:1.3rem;top:-1.4em;} .pricing-card .price small{font-family:var(--sans);font-size:1rem;color:var(--slate);font-weight:500;} .pricing-list{list-style:none;margin:28px 0 32px;padding:0;text-align:left;display:grid;gap:12px;} .pricing-list li{display:flex;gap:10px;font-size:.94rem;color:var(--body-text);} .pricing-list li svg{flex-shrink:0;width:18px;height:18px;color:var(--online);margin-top:2px;} .pricing-card .btn{width:100%;justify-content:center;padding:15px;} .pricing-fine{margin-top:16px;font-size:.78rem;color:var(--slate);} /* FAQ */ .faq{max-width:760px;margin:0 auto;} .faq-item{border-bottom:1px solid var(--line-dark);} .faq-q{ width:100%;text-align:left;background:none;border:none;cursor:pointer; display:flex;justify-content:space-between;align-items:center;gap:20px; padding:22px 4px;font-family:var(--sans);font-size:1rem;font-weight:600;color:var(--ink); } .faq-q .plus{font-family:var(--mono);color:var(--signal-dim);font-size:1.1rem;transition:transform .2s;flex-shrink:0;} .faq-item[open] .faq-q .plus{transform:rotate(45deg);} .faq-a{padding:0 4px 22px;color:var(--slate);font-size:.94rem;line-height:1.65;max-width:64ch;} /* CTA band */ .cta-band{background:var(--ink);color:var(--ink-text);text-align:center;padding:80px 0;} .cta-band h2{color:var(--ink-text);} .cta-band p{color:#B9C1D4;max-width:52ch;margin:0 auto 32px;font-size:1.05rem;} .cta-band .hero-ctas{justify-content:center;margin-bottom:0;} /* Footer */ footer{background:var(--ink);color:var(--slate);border-top:1px solid var(--line);padding:40px 0;} footer .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;} footer .brand{font-size:.95rem;} footer .foot-links{display:flex;gap:24px;list-style:none;margin:0;padding:0;font-size:.85rem;} footer .foot-links a{text-decoration:none;color:var(--slate);} footer .foot-links a:hover{color:var(--ink-text);} footer small{display:block;margin-top:6px;font-size:.78rem;color:#48526b;} @media (max-width:980px){ .hero .wrap{grid-template-columns:1fr;} .value-grid,.persona-grid{grid-template-columns:1fr;} .steps{grid-template-columns:1fr;gap:36px;} .step:not(:first-child){border-left:none;padding-left:0;} .compare-wrap{padding:28px 22px;} table.compare{font-size:.85rem;} table.compare th,table.compare td{padding:12px 8px;} } @media (max-width:560px){ section{padding:64px 0;} .hero{padding:56px 0 40px;} .pricing-card{padding:32px 24px;} } /* Long-form content pages (comparisons, guide) */ .article-hero{background:var(--ink);color:var(--ink-text);padding:64px 0 48px;} .article-hero .wrap{max-width:800px;} .breadcrumb{font-family:var(--mono);font-size:.78rem;color:var(--slate);margin-bottom:18px;} .breadcrumb a{color:var(--slate);text-decoration:none;} .breadcrumb a:hover{color:var(--ink-text);} .article-hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,4vw,2.9rem);line-height:1.08;letter-spacing:-.02em;margin:0 0 18px;} .article-hero p.lede{font-size:1.08rem;color:#B9C1D4;line-height:1.6;margin:0;max-width:60ch;} .prose{max-width:760px;margin:0 auto;font-size:1.02rem;line-height:1.7;color:var(--body-text);} .prose h2{margin-top:0;} .prose h3{font-size:1.15rem;margin:28px 0 10px;} .prose p{margin:0 0 20px;} .prose ul{margin:0 0 20px;padding-left:22px;} .prose li{margin-bottom:8px;} .prose .callout{background:var(--paper-2);border-left:3px solid var(--signal);border-radius:8px;padding:18px 22px;margin:0 0 28px;font-size:.96rem;} .prose table.compare{background:var(--ink);border-radius:16px;overflow:hidden;color:var(--ink-text);margin:0 0 28px;} .prose table.compare th, .prose table.compare td{padding:14px;} .prose table.compare thead th{padding:16px 14px;} /* Two-up banner teasers (Business / Privacy / Guides) */ .banner-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .banner-card{background:var(--ink);color:var(--ink-text);border-radius:20px;padding:38px 36px;} .banner-card.light{background:#fff;color:var(--body-text);border:1px solid var(--line-dark);} .banner-card .eyebrow{margin-bottom:16px;} .banner-card h3{font-family:var(--serif);font-weight:500;font-size:1.5rem;margin:0 0 12px;letter-spacing:-.01em;} .banner-card p{color:#B9C1D4;font-size:.98rem;line-height:1.6;margin:0 0 22px;} .banner-card.light p{color:var(--slate);} @media (max-width:860px){.banner-duo{grid-template-columns:1fr;}} /* Guides hub */ .guide-list{display:grid;gap:18px;} .guide-row{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#fff;border:1px solid var(--line-dark);border-radius:16px;padding:26px 28px;text-decoration:none;color:inherit;transition:border-color .15s, transform .15s;} .guide-row:hover{border-color:var(--signal);transform:translateY(-1px);} .guide-row .tag{font-family:var(--mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--signal-dim);display:block;margin-bottom:6px;} .guide-row h2{margin:0 0 6px;font-size:1.1rem;font-family:var(--sans);font-weight:700;letter-spacing:normal;} .guide-row p{margin:0;color:var(--slate);font-size:.92rem;} .guide-row .arrow{font-family:var(--mono);font-size:1.3rem;color:var(--slate);flex-shrink:0;} /* Privacy page checklist */ .priv-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;} .priv-item{background:#fff;border:1px solid var(--line-dark);border-radius:14px;padding:22px 24px;} .priv-item h3{font-size:1rem;margin:0 0 8px;display:flex;align-items:center;gap:8px;} .priv-item h3 svg{width:18px;height:18px;color:var(--online);flex-shrink:0;} .priv-item p{margin:0;color:var(--slate);font-size:.9rem;line-height:1.55;} @media (max-width:700px){.priv-grid{grid-template-columns:1fr;}} /* Glossary */ .glossary dl{margin:0;} .glossary dt{font-family:var(--serif);font-size:1.2rem;font-weight:500;color:var(--ink);margin:0 0 8px;scroll-margin-top:90px;} .glossary dd{margin:0 0 32px;padding:0 0 32px;border-bottom:1px solid var(--line-dark);color:var(--slate);font-size:.98rem;line-height:1.65;} .glossary dd:last-of-type{border-bottom:none;} .glossary-jump{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 40px;} .glossary-jump a{font-family:var(--mono);font-size:.78rem;background:var(--paper-2);border-radius:100px;padding:6px 14px;text-decoration:none;color:var(--ink);} .glossary-jump a:hover{background:var(--signal);color:#1a0f06;}