/* The public pages: the homepage, contact and sign-in. */

/* Page-to-page fades between the public pages; the masthead holds still. */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  html{scroll-behavior:smooth}
}
.masthead{view-transition-name:masthead}

/* ---- homepage masthead: sticky, with a marker under the current section --- */
@media (min-width:52em){
  .home .masthead{position:sticky; top:0; z-index:10}
  .home main section[id]{scroll-margin-top:5rem}
}
.section-nav{position:relative}
@media (max-width:30em){ .section-nav{gap:var(--space-2)} }
.nav-marker{position:absolute; left:0; top:0; height:2px; width:0; background:var(--accent);
            opacity:0; pointer-events:none}
.nav-marker.on{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .nav-marker{transition:transform .3s cubic-bezier(.3,.7,.3,1), width .3s cubic-bezier(.3,.7,.3,1), opacity .2s}
}

/* ---- hero ----------------------------------------------------------------- */
.hero{padding-block:var(--space-5) var(--space-4)}
.hero-text{display:grid; gap:var(--space-3); align-items:end}
@media (min-width:60em){
  .hero-text{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); column-gap:var(--space-6)}
  .hero-text h1{grid-row:span 2}
}
.hero h1{font-size:var(--step-4); line-height:1.02; letter-spacing:-.025em; max-width:14ch}
.lede{font-size:var(--step-1); color:var(--ink-soft); max-width:var(--measure); text-wrap:pretty}
.actions{display:flex; flex-wrap:wrap; gap:var(--space-2)}

/* The contract's life. Phones: a vertical rail. Wide screens: sixteen month
   columns, January to April a year on; each event starts at its month. */
.life{margin:var(--space-5) 0 0}
.life figcaption{font-size:var(--step--1); color:var(--slate); max-width:var(--measure)}
.life-events{list-style:none; margin:var(--space-3) 0 0; padding:0}
.ev{position:relative; padding:0 0 var(--space-3) var(--space-4);
    border-left:3px solid var(--rule); margin-left:.5rem}
.ev-1,.ev-2,.ev-3{border-left-color:var(--window-edge); background:var(--window)}
.ev::before{content:""; position:absolute; left:-.6rem; top:.3rem; width:.95rem; height:.95rem;
            border:2.5px solid var(--paper); box-sizing:content-box; transform:translateX(-1.5px)}
.src-paper::before{background:var(--src-paper); border-radius:50%}
.src-notice::before{background:var(--src-notice); border-radius:2px}
.src-decision::before{background:var(--src-decision); border-radius:1px; rotate:45deg; scale:.85}
.ev time{display:block; font-size:var(--step--1); color:var(--slate); font-variant-numeric:tabular-nums}
.ev strong{display:block; font-weight:600; font-size:var(--step-1); line-height:1.25; letter-spacing:-.01em}
.ev span{display:block; color:var(--ink-soft); line-height:1.45; margin-top:.2rem}
.ev .hear{color:var(--accent-text); font-weight:600; margin-top:var(--space-1)}
.life-gain{margin-top:var(--space-3); padding-left:var(--space-3); border-left:3px solid var(--window-edge);
           max-width:var(--measure); font-size:var(--step-1); line-height:1.35}
.life-gain strong{font-weight:600}

@media (min-width:64em){
  .life-events{display:grid; grid-template-columns:repeat(16,minmax(0,1fr));
               grid-template-rows:3rem auto; margin-top:var(--space-4)}
  /* The head start, January's committee paper to October's tender, shaded
     behind those events. */
  .life-events::before{content:""; grid-row:1 / 3; grid-column:1 / 10; background:var(--window);
                       border-radius:var(--radius) var(--radius) 0 0; transform-origin:left}
  /* The line through every event: January to February. */
  .life-events::after{content:""; grid-row:1; grid-column:1 / 14; align-self:center; height:3px;
                      background:var(--ink); transform-origin:left}
  .ev{grid-row:1 / 3; padding:3.75rem var(--space-3) var(--space-3) 0; margin:0; border:0; background:none}
  .ev::before{left:0; top:1.5rem; width:1.1rem; height:1.1rem; transform:translate(-50%,-50%)}
  .ev-1{grid-column:1 / 4} .ev-2{grid-column:4 / 7} .ev-3{grid-column:7 / 10}
  .ev-4{grid-column:10 / 13} .ev-5{grid-column:14 / 17}
  .life-gain{display:grid; grid-template-columns:repeat(16,minmax(0,1fr)); max-width:none;
             padding:0; border:0; margin-top:0}
  .life-gain > span{grid-column:1 / 10; position:relative; padding-top:var(--space-2);
                    border-top:2px solid var(--window-edge)}
  .life-gain > span::before,.life-gain > span::after{content:""; position:absolute; top:-.5rem;
                    width:2px; height:.5rem; background:var(--window-edge)}
  .life-gain > span::before{left:0}
  .life-gain > span::after{right:0}
}

/* The one orchestrated moment: the line draws and each event arrives as the
   line reaches it; the head start is the last thing to land. Wide screens only. */
@media (min-width:64em) and (prefers-reduced-motion: no-preference){
  .life-events::after{animation:draw 1.6s linear .2s backwards}
  .life-events::before{animation:draw 1.1s linear .2s backwards}
  .ev{animation:arrive .35s ease-out backwards}
  .ev-1{animation-delay:.2s} .ev-2{animation-delay:.57s} .ev-3{animation-delay:.94s}
  .ev-4{animation-delay:1.31s} .ev-5{animation-delay:1.8s}
  .life-gain{animation:arrive .5s ease-out 1.5s backwards}
}
@keyframes draw{ from{transform:scaleX(0)} }
@keyframes arrive{ from{opacity:0} }

/* ---- coverage ------------------------------------------------------------- */
.coverage{border-block:1px solid var(--rule); background:var(--paper-raised); padding-block:var(--space-5)}
.coverage .shell{display:grid; gap:var(--space-4); align-items:center}
@media (min-width:52em){ .coverage .shell{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:var(--space-6)} }
.coverage-sentence{font-size:var(--step-2); line-height:1.3; letter-spacing:-.01em; max-width:28ch;
                   text-wrap:pretty}
.coverage-sentence b{font-weight:600; font-variant-numeric:tabular-nums lining-nums}
.coverage-next{margin-top:var(--space-3); color:var(--ink-soft); max-width:var(--measure)}
.coverage-map{margin:0}
.outline{width:100%; height:auto; display:block; overflow:visible; aspect-ratio:1000/640}
.outline .b{fill:var(--uncovered); stroke:var(--paper-raised); stroke-width:1.1; stroke-linejoin:round}
.outline .b.covered{fill:var(--covered)}
.caption{margin-top:var(--space-2); font-size:var(--step--1); color:var(--slate);
         display:flex; align-items:center; gap:var(--space-1)}
.caption .key{width:.8rem; height:.8rem; border-radius:2px; background:var(--covered)}

/* ---- shared section rhythm ------------------------------------------------ */
.how,.features,.plans,.access,.questions{padding-block:var(--space-5) 0}
.home main h2{font-size:var(--step-3); letter-spacing:-.02em}
.section-lede{margin-top:var(--space-2); color:var(--ink-soft); max-width:var(--measure)}

/* ---- how it works --------------------------------------------------------- */
.stages{list-style:none; margin:var(--space-4) 0 0; padding:0; display:grid; gap:var(--space-3);
        counter-reset:stage}
@media (min-width:48em){ .stages{grid-template-columns:repeat(4,1fr)} }
.stage{padding-top:var(--space-2); border-top:2px solid var(--rule); counter-increment:stage}
.stage:first-child{border-top-color:var(--accent)}
.stage h3{font-size:var(--step-1); letter-spacing:-.01em}
.stage h3::before{content:counter(stage) ". "; color:var(--slate); font-weight:400}
.stage p{margin-top:var(--space-1); font-size:var(--step--1); color:var(--ink-soft)}
.note-wide{margin-top:var(--space-4); max-width:var(--measure);
           font-size:var(--step--1); color:var(--ink-soft)}

/* ---- what you get --------------------------------------------------------- */
.feature-list{display:grid; gap:0 var(--space-4); margin:var(--space-3) 0 0}
@media (min-width:44em){ .feature-list{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (min-width:68em){ .feature-list{grid-template-columns:repeat(3,minmax(0,1fr))} }
.feature-list > div{padding-block:var(--space-3); border-bottom:1px solid var(--rule)}
.feature-list dt{font-weight:600; font-size:var(--step-1); letter-spacing:-.01em}
.feature-list dd{margin:var(--space-1) 0 0; color:var(--ink-soft); max-width:34ch}

/* ---- plans: one panel, the usual choice on navy --------------------------- */
.plan-panel{margin-top:var(--space-4); display:grid; border:1px solid var(--rule);
            border-radius:var(--radius-lg); overflow:hidden; background:var(--paper)}
@media (min-width:56em){ .plan-panel{grid-template-columns:1fr 1.08fr 1fr} }
.plan{padding:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2)}
.plan + .plan{border-top:1px solid var(--rule)}
@media (min-width:56em){ .plan + .plan{border-top:0; border-left:1px solid var(--rule)} }
.plan h3{font-size:var(--step-2); letter-spacing:-.015em}
.plan-for{color:var(--ink-soft)}
.plan ul{margin:var(--space-1) 0 var(--space-3); padding:0; list-style:none; flex:1}
.plan li{padding-block:var(--space-1); border-top:1px solid var(--rule); font-size:var(--step--1)}
.plan .btn{align-self:start}
.plan-main{background:var(--bar); color:var(--bar-ink)}
.plan-main .plan-for{color:var(--bar-ink-soft)}
.plan-main li{border-top-color:var(--bar-line)}
.btn-light{background:var(--bar-ink); color:var(--bar)}
.btn-light:hover{background:var(--bar-ink-soft)}
.plan-main :focus-visible{outline-color:var(--bar-ink)}

/* ---- request access ------------------------------------------------------- */
.access .shell{display:grid; gap:var(--space-4); align-items:start}
@media (min-width:56em){ .access .shell{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--space-6)} }
.access-intro > p{margin-top:var(--space-2); color:var(--ink-soft); max-width:var(--measure)}
.access-form{padding:var(--space-4)}
.access-form form{display:grid; gap:var(--space-3)}
.access-form .pair{display:grid; gap:var(--space-3)}
@media (min-width:40em){ .access-form .pair{grid-template-columns:1fr 1fr} }
.access-form textarea{width:100%; font:inherit; padding:.5rem .6rem; border:1px solid var(--rule);
  border-radius:var(--radius); background:var(--paper); color:var(--ink); resize:vertical}
.access-form .btn{justify-self:start}
.access-form .form-ok,.access-form .form-error{margin-bottom:var(--space-3)}
.access-form select.chosen{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand)}
@media (prefers-reduced-motion: no-preference){
  .access-form select{transition:border-color .4s, box-shadow .4s}
}

/* ---- questions ------------------------------------------------------------ */
.faq{margin-top:var(--space-3); max-width:48rem; border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; list-style:none; padding-block:var(--space-3); font-weight:600;
             font-size:var(--step-1); display:flex; justify-content:space-between; gap:var(--space-3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--slate); font-weight:400}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:var(--space-3); color:var(--ink-soft); max-width:var(--measure)}
@media (prefers-reduced-motion: no-preference){
  .faq{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0; overflow:hidden;
    transition:block-size .25s ease, content-visibility .25s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

/* ---- sign-in ------------------------------------------------------------ */
.signin{padding-block:var(--space-6); display:grid; place-items:center}
.signin .panel{width:100%; max-width:24rem; padding:var(--space-4)}
.signin h1{font-size:var(--step-2); letter-spacing:-.015em}
.signin p{margin-top:var(--space-2); color:var(--ink-soft); font-size:var(--step--1)}
.signin form{margin-top:var(--space-3); display:grid; gap:var(--space-2)}
.signin .btn{width:100%; margin-top:var(--space-1)}
.form-error{padding:var(--space-2); border-radius:var(--radius); background:var(--bad-bg);
            color:var(--bad); font-size:var(--step--1)}