/* Shared layout for forturn.tw. Derived from reference/16-bauhaus.html:
   3px solid rules, zero border radius, flat geometric blocks, mobile first
   with a single 768px breakpoint. Colours come from tokens.css only. */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.8}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 18px}
.geo{font-family:var(--geo);font-weight:700;letter-spacing:-.01em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:100;background:var(--ink);color:#fff;padding:10px 16px}

/* nav */
/* Two heights: --navtop is the space the bar reserves in the page and never
   changes, --navh is the bar's own height and shrinks once the reader scrolls.
   Keeping them separate is what stops the page jumping at the threshold. */
:root{--navtop:76px;--navh:76px}
.nav-shrunk{--navh:60px}
.navsentinel{position:absolute;top:0;left:0;width:1px;height:12px;pointer-events:none}
.navspace{height:var(--navtop)}
.nav{position:fixed;top:0;left:0;right:0;z-index:60;height:var(--navh);
  background:var(--paper);border-bottom:var(--border) solid var(--ink);
  transition:height .18s ease}
.nav .wrap{display:flex;align-items:center;gap:14px;height:100%}
.logo{display:flex;align-items:center}
/* Display is set on each image, never on `.logo img`: a class plus an element
   outranks a single class, so a shared display:block here would override the
   display:none below and show both states at once. */
.logo img{width:auto}
.logo-full{display:block;height:46px}
.logo-mark{display:none;height:24px}
.nav-shrunk .logo-full{display:none}
.nav-shrunk .logo-mark{display:block}
.navlinks{display:none}
.navcta{margin-left:auto;background:var(--blue);color:#fff;font-weight:900;font-size:13.5px;padding:10px 18px}
.navcta:active{background:var(--blue-dk)}

/* Mobile navigation. The square button matches the geometry used by the hero
   cells and the section marks; there is no floating hamburger glyph here. */
.navtoggle{width:40px;height:40px;flex:none;position:relative;
  border:var(--border) solid var(--ink);background:transparent;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
/* The visual square is 40px but the touch target has to be 44px (WCAG 2.1
   target size), so it is grown with a pseudo-element rather than by making
   the button itself look bigger. */
.navtoggle::after{content:"";position:absolute;inset:-2px}
.navtoggle span{display:block;width:16px;height:3px;background:var(--ink)}
.navtoggle:focus-visible{outline:3px solid var(--red);outline-offset:2px}
/* Open state inverts the whole button instead of swapping in an ✕ glyph. */
.navtoggle[aria-expanded="true"]{background:var(--ink)}
.navtoggle[aria-expanded="true"] span{background:var(--paper)}

.navpanel{position:fixed;left:0;right:0;top:var(--navh);
  /* Only as tall as its items. Filling the viewport made the panel read as a
     separate screen and blanked out the page for no reason; as a menu hanging
     off the bar, the page stays visible behind it.
     The cap uses dvh, not vh: the mobile address bar shrinks the viewport and
     vh would let a long menu run off the bottom. */
  max-height:calc(100dvh - var(--navh));overflow-y:auto;
  background:var(--paper);border-top:var(--border) solid var(--ink);
  border-bottom:var(--border) solid var(--ink);z-index:59}
.navpanel-item{display:flex;align-items:center;gap:11px;height:54px;padding:0 18px;
  border-bottom:2px solid var(--ink);font-size:15px;font-weight:700}
.navpanel-item i{width:11px;height:11px;flex:none;display:block;background:var(--blue)}
/* Blue, yellow, red in turn — the same cycle the numbered steps already use,
   rather than a fifth colour scheme invented for the nav. */
.navpanel-item:nth-child(3n+2) i{background:var(--yellow)}
.navpanel-item:nth-child(3n) i{background:var(--red)}
.navpanel-item.is-current{background:var(--yellow)}
.navpanel-item.is-current i{background:var(--ink)}

/* hero */
.hero{border-bottom:var(--border) solid var(--ink);padding:26px 0 0}
/* Every hero ends clear of its own rule on a phone, whatever its last element
   happens to be: a summary, a tag row, a search box, the nine-cell
   composition. The composition carries its own 3px border, so letting it meet
   the rule stacks two rules of different widths (the grid sits inside the
   wrap, the rule runs full bleed) and reads as one thick, ragged line. */
@media(max-width:767px){
  .hero .wrap{padding-bottom:22px}
}
h1{font-size:32px;font-weight:900;line-height:1.2;letter-spacing:-.02em}
h1 span{display:inline-block;background:var(--yellow);padding:0 8px}
/* The summary is the first thing a reader meets: it carries the article's own
   voice, so it is ink rather than grey, and a size above the body text. A left
   rule rather than a box — the hero already ends in a 3px rule and the cover
   sits right under it, and a third container would read as clutter. */
.lede{color:var(--ink);font-size:17.5px;margin-top:16px;
  border-left:3px solid var(--blue);padding-left:16px}
.lede p + p{margin-top:1.15em}
/* Body copy at the summary's size, without its rule: on a page where every
   paragraph wore the rule, it stopped marking anything. */
.copy{color:var(--ink);font-size:17.5px;margin-top:16px;max-width:40em}
/* Without this the links in the summary inherit the surrounding colour and
   look like ordinary text. */
.lede a{color:var(--blue);text-decoration:underline}
.ctas{display:grid;gap:10px;margin-top:20px}
.cta{display:block;text-align:center;background:var(--blue);color:#fff;font-weight:900;font-size:17px;padding:16px}
.cta:active{background:var(--blue-dk)}
.cta.ghost{background:transparent;color:var(--ink);border:var(--border) solid var(--ink)}

/* signature: the nine-cell geometric composition */
.compose{margin-top:26px;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:74px;
  border-top:var(--border) solid var(--ink);border-left:var(--border) solid var(--ink)}
.cell{border-right:var(--border) solid var(--ink);border-bottom:var(--border) solid var(--ink);
  position:relative;overflow:hidden;display:grid;place-items:center;padding:8px}
.cell.blue{background:var(--blue)}
.cell.yellow{background:var(--yellow)}
.cell.red{background:var(--red)}
.cell .fig{font-family:var(--geo);font-weight:700;font-size:22px;line-height:1;text-align:center;position:relative;z-index:1}
.cell .fig small{display:block;font-family:var(--sans);font-size:10.5px;font-weight:500;margin-top:4px;letter-spacing:.04em}
.cell.blue .fig,.cell.red .fig{color:#fff}
.cell.span2{grid-column:span 2}
/* Sized by the cell's height, not its width: every cell is wider than it is
   tall, and a circle sized by the width is clipped into a rectangle with
   cut corners. */
.cell.circle::after{content:"";position:absolute;height:84%;aspect-ratio:1;border-radius:50%;background:var(--blue)}
.cell.half::after{content:"";position:absolute;left:0;right:0;bottom:0;height:60%;
  border-radius:100% 100% 0 0;background:var(--yellow)}
.cell.quarter::after{content:"";position:absolute;right:0;bottom:0;width:100%;height:100%;
  border-radius:100% 0 0 0;background:var(--blue)}

/* sections */
section{padding:44px 0;border-bottom:var(--border) solid var(--ink)}
.shead{margin-bottom:24px;display:flex;gap:12px;align-items:flex-start}
.shead .mark{width:26px;height:26px;flex:none;margin-top:6px}
.shead .mark.r{background:var(--red);border-radius:50%}
.shead .mark.y{background:var(--yellow)}
.shead .mark.b{background:var(--blue);border-radius:100% 0 0 0}
.shead h2{font-size:25px;font-weight:900;line-height:1.3;letter-spacing:-.01em}
.shead p{color:var(--dim);font-size:14.5px;margin-top:8px}

/* grid blocks shared by steps, cards and article lists */
.steps,.ai,.know{display:grid;gap:0;
  border-top:var(--border) solid var(--ink);border-left:var(--border) solid var(--ink)}
.st,.aicard,.art{border-right:var(--border) solid var(--ink);border-bottom:var(--border) solid var(--ink);padding:22px}

.st{padding:20px}
.st .n{font-family:var(--geo);font-size:34px;line-height:1;color:var(--blue)}
.st:nth-child(2) .n{color:var(--yellow)}
.st:nth-child(3) .n{color:var(--blue-dk)}
.st:nth-child(4) .n{color:var(--red)}
.st h3{font-size:17.5px;font-weight:900;margin:8px 0 6px}
.st p{font-size:14px;color:var(--dim)}
.st .t{display:inline-block;margin-top:8px;background:var(--ink);color:#fff;font-size:12px;font-weight:700;padding:3px 9px}

.aicard .shape{width:34px;height:34px;margin-bottom:12px;background:var(--blue);border-radius:50%}
.aicard:nth-child(2) .shape{background:var(--yellow);border-radius:0}
.aicard:nth-child(3) .shape{background:var(--red);border-radius:100% 0 100% 0}
.aicard h3{font-size:17.5px;font-weight:900;margin-bottom:6px}
.aicard p{font-size:14px;color:var(--dim)}
.aicard p + p{margin-top:8px}
.aicard a{color:var(--blue);text-decoration:underline;font-weight:700}

.art .k{display:inline-block;background:var(--yellow);font-size:12.5px;font-weight:900;padding:3px 10px}
.art h3{font-size:18px;font-weight:900;margin:12px 0 6px;line-height:1.45}
.art h3 a{text-decoration:underline;text-underline-offset:3px}
.art p{font-size:14px;color:var(--dim)}

/* definition list used for company facts */
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;font-size:14.5px}
.facts dt{color:var(--dim)}
.facts dd{font-weight:700;text-align:right}

/* 40em keeps a line near 40 characters, the same measure as an article. */
.bullets{list-style:none;font-size:14.5px;max-width:40em}
.bullets li{padding-left:20px;position:relative;margin-top:8px}
.bullets li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:9px;background:var(--blue)}

/* faq */
.faq details{border-bottom:var(--border) solid var(--ink);padding:16px 0}
.faq summary{cursor:pointer;font-weight:900;font-size:17px;list-style:none;display:flex;justify-content:space-between;gap:14px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:16px;height:16px;flex:none;background:var(--red);border-radius:50%;margin-top:8px}
.faq details[open] summary::after{background:var(--blue);border-radius:0}
.faq p{color:var(--dim);font-size:14.5px;margin-top:8px}
.faq p + p{margin-top:10px}
.faq ol,.faq ul{color:var(--dim);font-size:14.5px;margin:8px 0 0 20px}

/* loan plans */
/* One card is one plan. 18 期 cards are yellow so the two terms of an amount
   read as a pair rather than as two unrelated products; 30,000 has no second
   term and takes the full row in blue. */
.plangrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
.plancard{border:var(--border) solid var(--ink);background:#fff;padding:14px 12px;
  /* The nav is sticky and 60px tall, so a bare anchor would land the card
     underneath it. */
  scroll-margin-top:72px}
.plancard .amt{font-family:var(--geo);font-weight:700;font-size:28px;line-height:1;
  letter-spacing:-.02em}
.plancard .unit{font-family:var(--sans);font-size:12px;font-weight:900}
.plancard .term{margin-top:9px;padding-top:7px;border-top:2px solid var(--ink);
  font-size:13.5px;font-weight:900}
.plancard.long{background:var(--yellow)}
.plancard.solo{grid-column:1/-1;background:var(--blue);color:#fff;border-color:var(--blue);
  display:flex;align-items:center;gap:10px}
.plancard.solo .term{margin:0 0 0 auto;padding:0;border:0;font-size:14px}
.plannote{font-size:12.5px;color:var(--dim);line-height:1.7;margin-top:14px;
  border-left:var(--border) solid var(--ink);padding-left:12px}
/* Outlined on a phone: filled, it sat directly on the blue 30,000 card and the
   two read as one block, the card as a second button. */
.planscta{margin-top:22px;background:transparent;color:var(--ink);border:var(--border) solid var(--ink)}

/* blog taxonomy, dates and navigation */
.crumbs{font-size:13px;color:var(--dim);margin-bottom:10px}
.crumbs a{text-decoration:underline;text-underline-offset:3px}
/* The article trail is three levels on one line: the square separators match
   the dots in the mobile menu, and the last level gives up its tail rather
   than wrapping. */
.crumbs-article{display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden}
.crumbs-article a{flex:none}
.crumbs-article i{width:7px;height:7px;flex:none;display:block;background:var(--blue)}
.crumbs-article i.y{background:var(--yellow)}
.crumbs-article .here{color:var(--ink);font-weight:700;overflow:hidden;text-overflow:ellipsis}
/* The operating company, disclosed once and quietly. */
.operator{font-size:11.5px;color:var(--dim);line-height:1.75;
  border-top:1px solid #DCDCDC;margin-top:18px;padding-top:12px}
.meta{font-size:13.5px;color:var(--dim);margin-top:10px;font-family:var(--geo)}
.meta-sep{margin:0 6px}
.taxo{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px}
/* Category is a filled block, tag an outline: the weight difference says a
   category is a deliberate grouping and a tag a looser pointer. */
.taxo .k{background:var(--yellow);color:var(--ink);font-size:12.5px;font-weight:900;
  padding:9px 12px}
.pill{border:2px solid var(--ink);font-size:12.5px;font-weight:700;padding:9px 12px}
.pill:hover{background:var(--ink);color:#fff}
/* The cover leads the reading column: it needs air above it and before the
   contents list, and it used to sit flush against both the tag row and the
   hero's rule. */
.cover{margin:0 0 26px}
.cover img{display:block;width:100%;height:auto;border:var(--border) solid var(--ink)}
/* Bled to the card edges with a rule beneath: blocks butt against each other
   in this system, they do not float inside padding. */
.art-thumb{display:block;margin:-22px -22px 14px;border-bottom:var(--border) solid var(--ink)}
.art-thumb img{display:block;width:100%;height:auto}

.share{margin-top:28px;padding-top:18px;border-top:var(--border) solid var(--ink);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.share-label{font-weight:900;font-size:14px}
.share-btn{border:2px solid var(--ink);background:transparent;color:var(--ink);
  font-family:var(--sans);font-size:13.5px;font-weight:700;padding:10px 16px;cursor:pointer}
.share-btn:hover{background:var(--ink);color:#fff}
.share-copy{flex-basis:100%;display:grid;gap:4px}
.share-copy input{border:2px solid var(--blue);background:#fff;padding:6px 8px;font:inherit;font-size:13px;width:100%}
.share-copy small{color:var(--dim)}

.adjacent{display:grid;gap:12px;margin-bottom:32px}
.adjacent-link{border:var(--border) solid var(--ink);padding:14px 16px;font-weight:900;font-size:15px}
.adjacent-link span{display:block;font-size:12px;font-weight:500;color:var(--dim);margin-bottom:4px}
.adjacent-link.is-next{text-align:right}
.adjacent-link:hover{background:var(--yellow)}

.pager{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px}
.pager-link{border:2px solid var(--ink);padding:10px 16px;font-weight:700;font-size:14px}
.pager-link:hover{background:var(--ink);color:#fff}
/* Dimmed rather than faded: opacity would drop the contrast below AA. */
.pager-link.is-off{color:var(--dim);border-color:var(--dim);pointer-events:none}
.pager-at{font-family:var(--geo);font-size:13.5px;color:var(--dim)}

@media(min-width:768px){
  .adjacent{grid-template-columns:1fr 1fr}
}

/* article body */
/* 17px is the floor for comfortable Chinese body text on a phone: every glyph
   is full-width, so the same number as a Latin face reads smaller. */
.prose{font-size:17px}
.prose p{margin-top:1.15em}
.prose h3{font-size:18.5px;font-weight:900;line-height:1.4;margin:1.4em 0 .4em}
.prose a{color:var(--blue);text-decoration:underline}
.prose ul,.prose ol{margin:1em 0 0 20px}
/* h2 and h4 join h3 now that the body offers all three heading levels. */
/* The nav is sticky, so a heading jumped to from the table of contents would
   otherwise land underneath it. */
.prose h2,.prose h3{scroll-margin-top:76px}
/* A heading set at the body's line height drifts apart when it wraps. */
.prose h2{font-size:22px;font-weight:900;line-height:1.35;margin:1.6em 0 .5em;
  letter-spacing:-.01em}
.prose h4{font-size:17px;font-weight:700;line-height:1.4;margin:1.2em 0 .3em}
.prose blockquote{border-left:var(--border) solid var(--yellow);padding-left:16px;
  margin:1.4em 0;color:var(--dim)}
.prose hr{border:0;border-top:var(--border) solid var(--ink);margin:2em 0}

/* article content blocks */
/* Each stream block contains its own floats. Without this a floated image at
   the end of one block pushes the next block — a table, say — sideways. */
.prose > div,.lede{display:flow-root}
/* Article sections are <section> elements, so the page-level band rule near the
   top of this file applied to them: 44px of padding and a 3px rule under every
   one turned a ten-section article into ten stacked bands, with 128px of empty
   space above each heading and 16px below it. */
.prose .article-section{padding:0;border-bottom:0}
.prose .w-block-section + .w-block-section{margin-top:2.6em}
.prose .article-section > h2{margin-top:0;margin-bottom:.7em}
/* The shadows show which side has more table. The two paper gradients scroll
   with the content and cover the shadow once that edge is reached, so a
   table that fits shows none. */
.table-wrap{overflow-x:auto;margin:1.4em 0;border:var(--border) solid var(--ink);
  background:
    linear-gradient(to right,var(--paper) 40%,rgba(251,250,247,0)) left / 32px 100% no-repeat local,
    linear-gradient(to left,var(--paper) 40%,rgba(251,250,247,0)) right / 32px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(20,20,20,.28),rgba(20,20,20,0)) left / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(20,20,20,.28),rgba(20,20,20,0)) right / 14px 100% no-repeat scroll}
.table-wrap table{border-collapse:collapse;width:100%;min-width:480px;font-size:15.5px}
/* A floor per cell: without it the widest column takes the room and a short
   first column wraps one character a line. */
.table-wrap th,.table-wrap td{border:1px solid var(--ink);padding:8px 12px;text-align:left;min-width:5.5em}
.table-wrap th{background:var(--yellow);font-weight:900}
/* Left-aligned, not the browser default centre: it reads as a label for the
   table rather than a title floating above it. */
.table-wrap caption{padding:8px 12px;text-align:left;font-size:13px;color:var(--dim)}
/* Dozens of statute citations at body size make the end of an article feel
   heavier than the article itself. */
.article-section--sources,
.article-section--disclaimer{font-size:13.5px;color:var(--dim)}
.article-section--sources h2,
.article-section--disclaimer h2{font-size:18px}

/* Named article-fig, not fig: the hero composition already owns .fig. */
.article-fig{margin:1.6em 0}
.article-fig img{display:block;width:100%;height:auto;border:var(--border) solid var(--ink)}
.article-fig figcaption{margin-top:8px;font-size:13.5px;color:var(--dim)}

/* Held at 16:9 so the iframe scales with the column instead of overflowing. */
.embed-wrap{position:relative;margin:1.6em 0;padding-bottom:56.25%;height:0;
  border:var(--border) solid var(--ink)}
.embed-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}

.richtext-image{display:block;height:auto;margin:1.4em 0}
.richtext-image.full-width{width:100%}
.richtext-image.left{float:left;width:50%;margin:0 1.2em 1em 0}
.richtext-image.right{float:right;width:50%;margin:0 0 1em 1.2em}

.toc{border:var(--border) solid var(--ink);padding:16px 20px;margin-bottom:28px}
.toc-title{font-weight:900;font-size:15px;margin-bottom:10px}
.toc ol{list-style:none;font-size:14.5px}
/* Marker drawn rather than a list-style dot: the size and colour then say
   which heading level an entry is, which a browser bullet cannot. */
/* The whole row is the target: a 21px line of text is hard to hit with a
   thumb, and 44px is the usual floor. */
.toc li{margin-top:0;padding-left:16px;position:relative}
.toc li::before{content:"";position:absolute;left:0;top:17px;
  width:7px;height:7px;border-radius:50%;background:var(--blue)}
/* Chapter rows stay a comfortable target; the sub-headings under them are
   secondary, so they sit tighter. A 35-row list at one uniform height ran to
   two phone screens before the article began. */
.toc li a{display:block;padding:9px 0;line-height:1.5;text-decoration:underline;
  text-underline-offset:3px}
.toc .toc-l3 a{padding:5px 0}
.toc li a:hover{color:var(--blue)}
.toc-l3{margin-left:18px;font-size:13.5px;color:var(--dim)}
.toc .toc-l3::before{width:5px;height:5px;top:14px;background:var(--dim)}

/* search */
.searchbox{display:flex;gap:0;margin-top:18px;max-width:420px}
.searchbox input{flex:1;min-width:0;border:var(--border) solid var(--ink);
  border-right:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:15px;padding:11px 14px}
.searchbox input:focus{outline:2px solid var(--red);outline-offset:-2px}
.searchbox button{border:var(--border) solid var(--ink);background:var(--blue);
  color:#fff;font-family:var(--sans);font-weight:900;font-size:14.5px;
  padding:11px 20px;cursor:pointer}
.searchbox button:hover{background:var(--blue-dk)}
.searchnote{font-size:14.5px;color:var(--dim);margin-bottom:20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}

@media(max-width:767px){
  .richtext-image.left,.richtext-image.right{float:none;width:100%;margin:1.4em 0}
}

/* Marker for content awaiting sign-off. It follows the section's subtitle, so
   it sits inside the content column and reads as part of the note; pinned to
   the section's corner it landed at the edge of the window on a desktop and
   looked like a debugging label. */
[data-placeholder] .shead p::after{content:"內容準備中";display:inline-block;margin-left:8px;
  vertical-align:1px;background:var(--yellow);color:var(--ink);font-size:11px;font-weight:900;
  line-height:1.6;padding:1px 8px;letter-spacing:.04em}
/* On a phone the subtitle fills the line and the marker wraps; on its own line
   it drops the gap that separated it from the text, or it sits indented. */
@media(max-width:767px){
  [data-placeholder] .shead p::after{display:table;margin:8px 0 0}
}

/* final call to action and footer */
/* The yellow band parts the blue call to action from the near-black footer;
   meeting edge to edge, the two heavy blocks read as one. */
.final{background:var(--blue);color:#fff;text-align:center;border-bottom:12px solid var(--yellow)}
.final h2{font-size:28px;font-weight:900;line-height:1.3;letter-spacing:-.02em}
.final h2 span{background:var(--yellow);color:var(--ink);padding:0 8px;display:inline-block}
.final p{color:#C4D3EC;font-size:14.5px;margin:14px 0 20px}
.final p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.final .cta{background:var(--paper);color:var(--ink)}
footer{background:var(--ink);color:#B0B0B0;padding:30px 0 46px;font-size:12.5px;line-height:1.85}
.discl{border:2px solid #3A3A3A;padding:16px}
.discl b{color:#fff}
.fbot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px;font-family:var(--geo);font-size:11.5px}
.fplans{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:18px;font-size:13px;font-weight:900}
.fplans a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.flegal{display:flex;gap:14px;flex-wrap:wrap;margin-top:16px;font-size:12.5px}
.flegal a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* The documents applicants agree to: the measure of an article, plain paragraphs. */
.legal{max-width:40em;font-size:16px;display:grid;gap:1em}
.legalver{margin-top:24px;font-size:12.5px;color:var(--dim)}
/* The brand signs off the page, centred and reversed out of the dark ground. */
.footlogo{display:block;width:auto;height:58px;margin:0 auto 22px}

/* desktop */
@media(min-width:768px){
  .wrap{padding:0 28px}
  :root{--navtop:86px;--navh:86px}
  .nav-shrunk{--navh:70px}
  .logo-full{height:54px}
  .logo-mark{height:26px}
  .nav .wrap{gap:26px}
  .navlinks{display:flex;gap:24px;margin-left:auto;font-size:14.5px;font-weight:500}
  .navlinks a:hover{color:var(--blue)}
  .navcta{margin-left:0}
  /* The panel and its button belong to the small screen only. */
  .navtoggle{display:none}
  .navpanel{display:none}
  .hero{padding:60px 0 0}
  .hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding-bottom:56px}
  /* An article hero is one column: the cover moved into the reading column, so
     a second grid track would leave half the hero empty. */
  .hero-article .wrap{display:block;padding-bottom:40px}
  .hero-article h1,.hero-article .lede,.hero-article .meta,.hero-article .taxo{max-width:720px}
  /* Chinese long-form reads comfortably at 30-45 characters a line; the
     unconstrained column ran to 69. The table of contents and the share row
     keep the same width so the column has one left edge. */
  .reading .cover,.reading .toc,.reading .prose,.reading .share{max-width:720px}
  /* The article is one column, so the column is centred rather than left in
     a 1120px frame with 500px empty on its right. The hero shares the width
     so the title and the body keep one left edge. */
  .hero-article .wrap,.reading{max-width:calc(720px + 56px)}
  /* Keeps each answer near 50 characters a line and the open/closed marker
     within reach of its question. */
  .faq{max-width:760px}
  .prose{font-size:17.5px}
  .prose h2{font-size:26px;line-height:1.3}
  .prose h3{font-size:20px}
  h1{font-size:52px}
  .lede{font-size:18px}
  .ctas{grid-template-columns:auto auto;justify-content:start;gap:14px;align-items:start}
  .cta{padding:16px 40px}
  .compose{margin-top:0;grid-auto-rows:98px}
  .cell .fig{font-size:26px}
  section{padding:70px 0}
  .shead h2{font-size:33px}
  .plans,.ai,.know{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(4,1fr)}
  .final h2{font-size:38px}
  .final .cta{display:inline-block;padding:16px 46px}
  .plancard .amt{font-size:34px}
  .plancard{padding:18px 16px}
  /* The plans hero has three children. Pinning the cards to the right column
     across both rows keeps the buttons directly under the summary, while the
     phone layout stacks them in source order: cards first, buttons last. */
  .hero-loans .wrap{align-items:start}
  .hero-loans .hl-cards{grid-column:2;grid-row:1 / span 2}
  /* The home page plan block mirrors the hero: copy on the left, cards on
     the right. Without this the five cards stretch across the full 1064px
     and the grid reads as empty. */
  .plans-split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
  /* The copy is half the height of the cards beside it, which left the lower
     left of the block empty. Framed and stretched to the cards' height, with
     the button pinned to the bottom, the two columns end on one line. The
     disclosure stays under the cards, where the spec puts it. */
  .plansbox{display:flex;flex-direction:column;border:var(--border) solid var(--ink);
    background:#fff;padding:28px}
  .plansbox .planscta{margin-top:auto;background:var(--blue);color:#fff;border:0}
  .plansbox .bullets{margin-bottom:24px}
  .plans-split .plangrid{margin-top:0}
}

/* apply entries (online application spec 8; San chose option F, 2026-10-13)
   The ruler is the form's three segments in the colours of their marks on the
   form (apply.css .seg .mark): blue, yellow, red. It appears wherever someone
   is asked to apply, so they know before they start that it is three parts. */
.ruler{display:grid;grid-template-columns:repeat(3,1fr)}
.ruler i{height:8px;border:2px solid var(--ink);border-right-width:0;background:var(--blue)}
.ruler i:nth-child(2){background:var(--yellow)}
.ruler i:nth-child(3){background:var(--red);border-right-width:2px}
/* Each plan card applies for its own plan. Outlined in the card's own ink, so
   the yellow and blue cards keep their colour and the link reads as part of the card. */
.planapply{display:block;margin-top:10px;border:2px solid currentColor;padding:6px 4px;text-align:center;
  font-weight:900;font-size:13.5px;min-height:44px;display:flex;align-items:center;justify-content:center}
.plancard.solo{flex-wrap:wrap}
.plancard.solo .planapply{margin:0;flex:1 0 100%}

/* The phone's bottom bar (spec 8.1 entry 2). Below the nav (60) so an open menu covers it. */
.applybar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr 2fr;
  background:var(--paper);border-top:var(--border) solid var(--ink);padding-bottom:env(safe-area-inset-bottom,0px)}
.applybar a{display:grid;place-items:center;align-content:center;gap:4px;min-height:56px;font-weight:900;font-size:14.5px}
.applybar a + a{border-left:var(--border) solid var(--ink)}
.applybar .go{background:var(--blue);color:#fff;padding:6px 14px}
.applybar .go .ruler{width:100%}
.applybar .go .ruler i{height:5px;border-color:#fff}
.applybar-space{height:calc(59px + env(safe-area-inset-bottom,0px))}
@media(min-width:768px){.applybar,.applybar-space{display:none}}
.rulerlabels{display:grid;grid-template-columns:repeat(3,1fr);font-size:12px;font-weight:700;margin-top:4px}
/* The apply button with its ruler and note: one item in .ctas, so on a wide
   screen the ruler stays under its button and the second button sits beside them. */
.ctago{display:grid;gap:8px;align-content:start}
.ctanote{font-size:13.5px;color:var(--dim);margin-top:-2px}
.ctanote a{color:var(--blue);font-weight:700;text-decoration:underline}

/* Inside .prose, so every inherited text style is set again here. */
.applycard{border:var(--border) solid var(--ink);background:#fff;padding:16px;margin:28px 0;display:grid;gap:10px;max-width:720px}
.prose .applycard p{margin:0}
.applycard-h{font-weight:900;font-size:18px}
.applycard-facts{font-size:14.5px;color:var(--ink)}
.prose .applycard .cta{color:#fff;text-decoration:none}

.applyhome .wrap{max-width:640px;display:grid;gap:14px}
.applyhome h1{margin-top:2px}
.applyhome .chosen{justify-self:start;border:2px solid var(--ink);background:#fff;font-weight:900;font-size:14px;padding:3px 12px}
.mustbring{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mustbring li{background:var(--blue);color:#fff;padding:12px;display:grid;gap:2px}
.mustbring b{font-size:18px}
.bonusline{background:#FCF0C2;border:2px dashed var(--ink);padding:10px 12px;margin:0;display:grid;gap:2px;font-size:14.5px}
.planpick{display:grid;gap:14px}
.planpick fieldset{border:0;padding:0;margin:0;display:grid;gap:8px}
.planpick legend{font-size:17px;font-weight:900;margin-bottom:8px}
.ptiles{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ptile{position:relative;display:flex}
.ptile[hidden]{display:none}
.ptile input{position:absolute;opacity:0;width:1px;height:1px}
.ptile span{flex:1;display:grid;place-items:center;text-align:center;min-height:56px;border:var(--border) solid var(--ink);background:#fff;font-family:var(--geo);font-weight:700;font-size:17px}
.ptile span small{font-family:var(--sans);font-weight:500;font-size:12px;color:var(--dim)}
.planpick.js .ptile span small{display:none}
.ptile input:checked+span{background:var(--blue);border-color:var(--blue);color:#fff}
.ptile input:focus-visible+span{outline:3px solid var(--red);outline-offset:2px}
.planpick .cta:disabled{opacity:.45;cursor:not-allowed}
.applyhome .saved{font-size:15px}
.applyhome .cta{margin-top:6px}
.resumeline{text-align:center;font-size:14.5px}
.resumeline a{font-weight:900;color:var(--blue);text-decoration:underline}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto}}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}