/* ==========================================================================
   SAT LANDING / LISTING  —  the page BODY, shipped 2026-08-19.

   Built from design/sat-landing-linguaface-v2.html, which reproduces
   resolveprep.com/sat-tests's measured layout in LinguaFace's palette.

   WHY THIS IS A SEPARATE SHEET FROM sat-home.css. sat-home.css is the shared
   product CHROME — thirteen selectors that deliberately carry TestGlider's
   tokens so IELTS, TOEFL and SAT do not render three different blues, and it is
   EXEMPT from the colour standard for exactly that reason. This file is the body
   beneath the chrome, HANDOFF §10.16 governs it in full, and it is a guarded
   SURFACE in claudecode/colour-standard.mjs. Keeping them apart is what lets the
   exemption stay narrow and honest instead of covering the whole page.

   EVERYTHING IS SCOPED UNDER .sat-tg. layouts/app.blade.php is shared with the
   homepage, IELTS and TOEFL, so an unscoped `.card` or `.hero` here would repaint
   all three. Same discipline as .ielts-page and .toefl-tg.
   ========================================================================== */

.sat-tg{
  --purple:#23075B;      /* .homebody, assets/css/home2css.blade.php */
  --purple-up:#2E0B73;   /* sanctioned gradient end — the CTA on white */
  --blue:#0051FD;        /* --color1, assets/css/styles.blade.php */
  --white:#FFFFFF;
  --body:#5B5C61;        /* --pale-black */
  --ink:#3B3D45;
  --line:#E4E7EC;
  --wash:#F7F9FB;
  background:var(--white);
  color:var(--body);
}
.sat-tg *{box-sizing:border-box;}

/* ==========================================================================
   HERO — measured off resolveprep.com/sat-tests at innerWidth 1280.

   THE DIAGONAL IS A CLIP-PATH ON THIS PAGE, not the hard-stop gradient the
   homepage's hero uses. Measured off the live element:
       desktop  polygon(100% 0, 100% 70%, 0 100%, 0 0)
       mobile   polygon(100% 0, 100% 90%, 0 100%, 0 0)
   On the measured 1264.67 x 390.72 box that runs from (100%, 273.5) to
   (0, 390.72) — 117.2px across the width, 5.3deg, deeper purple on the LEFT.
   That is the opposite hand to the card's strip, so the two shapes lean against
   each other rather than repeating.

   MEASURED  hero 1264.67 x 390.72, padding-bottom 96
             row  max-width 900, centred, two 450px columns
             sub  16/400, line-height 24, centred
             CTA  258.8 x 48, radius 6, 18/500
             art  400 x 250.72 at hero-relative (657.33, 32)

   THE HERO IS DECORATIVE AND STATIC, by decision. It is marketing art, not a
   view of any real exam, and nothing in it is read from the database.
   ========================================================================== */
.sat-tg .sat-hero{
  position:relative;
  background:var(--purple);
  padding-bottom:96px;
  color:var(--white);
  clip-path:polygon(100% 0, 100% 70%, 0 100%, 0 0);
}
@media (max-width:640px){
  .sat-tg .sat-hero{clip-path:polygon(100% 0, 100% 90%, 0 100%, 0 0);}
}
.sat-tg .sh-row{max-width:900px;margin:0 auto;display:flex;justify-content:center;}
.sat-tg .sh-copy{width:450px;padding:8px 0;}
.sat-tg .sh-art{width:450px;padding:12px 0;margin-top:20px;display:flex;align-items:center;justify-content:center;}
.sat-tg .sh-eyebrow{
  margin:0;padding:24px 24px 0;text-align:center;
  font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#B3A9D6;
}
/* MEASURED 128px/700 in Amatic SC, one line. NOT copied at 128px: their headline
   is three short words in a narrow display face and ours is five words in a
   normal-width sans inside a 450px column, where 128px cannot wrap. The measured
   BAND is kept instead — their h1 box is 176px, this one is 162px. */
.sat-tg .sh-h1{
  margin:0;padding:10px 24px 8px;text-align:center;
  font-size:40px;line-height:48px;font-weight:800;letter-spacing:-.02em;color:var(--white);
}
.sat-tg .sh-sub{margin:0;padding:0 16px;text-align:center;font-size:16px;line-height:24px;color:var(--white);}
/* On the purple, #0051FD is a FILL carrying white — 2.87:1 as text there, so it
   is never used as one. HANDOFF §10.16. */
.sat-tg .sh-cta{
  display:flex;align-items:center;justify-content:center;
  width:258.8px;height:48px;margin:20px auto 0;
  background:var(--blue);color:var(--white);
  font-size:18px;font-weight:500;border-radius:6px;text-decoration:none;
}
.sat-tg .sh-cta:hover{background:#0039B3;color:var(--white);}

/* --------------------------------------------------------------------------
   THE LAPTOP. Built at 1200px internal and scaled by 1/3 into a 400px slot, so
   every label and curve is real DOM at a readable size rather than 1px mush.
   Internal coordinates are the 2400x1503 artwork's own, halved.
   -------------------------------------------------------------------------- */
.sat-tg .lapwrap{width:400px;height:250.5px;}
.sat-tg .lap{width:1200px;height:751.5px;position:relative;transform:scale(0.33333);transform-origin:top left;}
.sat-tg .lap-lid{position:absolute;left:148.5px;top:34px;width:895.5px;height:644px;background:#190342;border-radius:14px 0 0 0;}
.sat-tg .lap-screen{position:absolute;left:173.5px;top:64px;width:841px;height:583.5px;background:var(--white);overflow:hidden;display:flex;flex-direction:column;}
.sat-tg .lap-deck{position:absolute;left:16.5px;top:678px;width:1162.5px;height:26px;background:#3B3D45;border-radius:0 0 8px 8px;}
.sat-tg .lap-deck::after{content:"";position:absolute;left:50%;transform:translateX(-50%);top:0;width:150px;height:7px;background:#5B5C61;border-radius:0 0 6px 6px;}
.sat-tg .lap-base{position:absolute;left:16.5px;top:704px;width:1162.5px;height:13px;background:#190342;border-radius:0 0 10px 10px;}

.sat-tg .lx-head{height:46px;flex:0 0 46px;background:#D9E3FF;position:relative;color:#23075B;}
.sat-tg .lx-sect{position:absolute;left:14px;top:7px;font-size:15px;}
.sat-tg .lx-dir{position:absolute;left:14px;top:29px;font-size:12px;}
.sat-tg .lx-timer{position:absolute;left:50%;transform:translateX(-50%);top:4px;font-size:22px;font-weight:700;}
.sat-tg .lx-hide{position:absolute;left:50%;transform:translateX(-50%);top:30px;background:var(--white);border:1px solid #B3A9D6;border-radius:9999px;font-size:10px;font-weight:700;padding:1px 12px;}
.sat-tg .lx-tools{position:absolute;right:12px;top:5px;display:flex;gap:18px;text-align:center;font-size:9px;}
.sat-tg .lx-tools b{display:block;font-size:15px;font-weight:400;line-height:16px;}
.sat-tg .lx-rule{border-top:2px dashed #3B3D45;}
.sat-tg .lx-panes{flex:1;display:flex;min-height:0;position:relative;}
.sat-tg .lx-pl{width:426px;flex:0 0 426px;padding:12px 14px;border-right:2px solid #3B3D45;font-size:12px;line-height:17px;color:#23075B;}
.sat-tg .lx-pr{flex:1;padding:12px 14px;font-size:12px;line-height:17px;color:#23075B;}
.sat-tg .lx-pl h4{margin:0 0 6px;font-size:14px;font-weight:700;}
.sat-tg .lx-pl ul{margin:0;padding-left:14px;}
.sat-tg .lx-pl li{margin-bottom:4px;}
.sat-tg .lx-tbl{margin-top:10px;font-size:11px;line-height:15px;}
.sat-tg .lx-tbl td{padding:0 18px 0 0;vertical-align:top;}
.sat-tg .lx-qhead{display:flex;align-items:center;gap:8px;background:#F7F9FB;padding:3px 6px;margin:-2px 0 12px;}
.sat-tg .lx-qnum{background:#23075B;color:var(--white);font-size:13px;font-weight:700;width:22px;height:22px;display:grid;place-items:center;}
.sat-tg .lx-bm{width:20px;height:20px;border:1px solid #23075B;display:grid;place-items:center;font-size:11px;}
.sat-tg .lx-eq{text-align:center;font-size:19px;margin:18px 0 16px;}
.sat-tg .lx-frac{display:inline-block;vertical-align:middle;text-align:center;font-size:14px;line-height:1.05;}
.sat-tg .lx-frac span{display:block;padding:0 3px;}
.sat-tg .lx-frac span:first-child{border-bottom:1.2px solid #23075B;}
.sat-tg .lx-input{width:150px;height:34px;border:1px solid #8A8C91;margin:34px auto 0;display:block;}
.sat-tg .lx-prev{text-align:center;font-size:15px;margin-top:26px;}
.sat-tg .lx-foot{height:47.5px;flex:0 0 47.5px;background:#D9E3FF;position:relative;}
.sat-tg .lx-qcount{position:absolute;left:50%;transform:translateX(-50%);top:9px;background:#23075B;color:var(--white);font-size:12px;font-weight:600;padding:5px 16px;border-radius:5px;}
.sat-tg .lx-nav{position:absolute;right:12px;top:9px;display:flex;gap:8px;}
.sat-tg .lx-nav span{background:#2E0B73;color:var(--white);font-size:12px;font-weight:600;padding:5px 16px;border-radius:9999px;}

/* the Desmos panel. Both curves are genuinely plotted from y=2x+14 and
   y=-12/x; the marked point (-6, 2) lies on both, which is the real answer to
   the question on screen. Desmos plots its first expression red — red is not in
   LinguaFace's palette, so the two curves are the purple and #5B7CFF, the value
   the standard sanctions for decorative geometry only. */
.sat-tg .dz{position:absolute;left:139.5px;top:26px;width:284px;height:503px;background:var(--white);box-shadow:0 3px 12px rgba(0,0,0,.28);z-index:5;display:flex;flex-direction:column;}
.sat-tg .dz-bar{height:27.5px;flex:0 0 27.5px;background:#190342;color:var(--white);display:flex;align-items:center;gap:8px;padding:0 8px;font-size:13px;}
.sat-tg .dz-bar .sp{margin-left:auto;}
.sat-tg .dz-graph{position:relative;height:204px;flex:0 0 204px;background:var(--white);}
.sat-tg .dz-graph svg{display:block;}
.sat-tg .dz-side{position:absolute;right:5px;top:8px;display:flex;flex-direction:column;gap:5px;}
.sat-tg .dz-side i{font-style:normal;width:17px;height:17px;border:1px solid #E4E7EC;background:var(--white);display:grid;place-items:center;font-size:10px;color:#3B3D45;border-radius:2px;}
.sat-tg .dz-tools{height:24px;flex:0 0 24px;border-top:1px solid #E4E7EC;border-bottom:1px solid #E4E7EC;display:flex;align-items:center;gap:14px;padding:0 8px;font-size:11px;color:#3B3D45;}
.sat-tg .dz-tools .sp{margin-left:auto;}
.sat-tg .dz-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-bottom:1px solid #E4E7EC;font-size:13px;color:#23075B;}
.sat-tg .dz-row.on{background:#EEF3FF;}
.sat-tg .dz-dot{width:16px;height:16px;border-radius:50%;display:grid;place-items:center;color:var(--white);font-size:9px;flex:0 0 16px;}
/* The two Desmos expression dots. Class rather than an inline style so the
   shipped blade carries no colour of its own and the palette lives in one
   place — which is also what lets colour-standard.mjs guard this file rather
   than the markup. */
/* The plotted graph. SVG fill/stroke are presentation attributes, so CSS wins
   over them — the colours live here rather than in the markup so the shipped
   blade carries none and colour-standard.mjs can guard one file instead of
   trusting a comment. */
.sat-tg .dz-graph .g-paper{fill:#FFFFFF;}
.sat-tg .dz-graph .g-grid{stroke:#E4E7EC;}
.sat-tg .dz-graph .g-axis{stroke:#8A8C91;}
.sat-tg .dz-graph .g-curve{stroke:#2E0B73;}
.sat-tg .dz-graph .g-line{stroke:#5B7CFF;}
.sat-tg .dz-graph .g-pt{fill:#23075B;}
.sat-tg .dz-graph .g-lbl{fill:#3B3D45;}
.sat-tg .dz-dot--a{background:#2E0B73;}
.sat-tg .dz-dot--b{background:#5B7CFF;}
.sat-tg .dz-x{margin-left:auto;color:#8A8C91;font-size:11px;}
.sat-tg .dz-mark{margin-top:auto;text-align:center;font-size:9px;color:#8A8C91;padding-bottom:6px;letter-spacing:.04em;}

/* ==========================================================================
   THE LISTING
   ========================================================================== */
.sat-tg .tests{padding:64px 0 88px;background:var(--white);}
.sat-tg .tests-head{max-width:696.68px;margin:0 auto 8px;padding:0 16px;text-align:center;}
.sat-tg .tests-head h2{
  margin:0 0 12px;font-size:32px;line-height:1.2;font-weight:700;
  letter-spacing:-.02em;color:var(--purple);
}
.sat-tg .tests-head p{margin:0 auto;max-width:560px;font-size:15px;line-height:1.6;color:var(--body);}

/* MEASURED  grid gap 32 both axes; two columns; the container is 696.68 wide
   with 16px side padding, which is exactly what puts each card on 316.34. The
   card width is a CONSEQUENCE of the container, as it is on ResolvePrep. */
.sat-tg .grid{
  max-width:696.68px;margin:0 auto;padding:0 16px;
  display:grid;grid-template-columns:repeat(2,1fr);gap:32px;align-items:stretch;
}

/* --------------------------------------------------------------------------
   THE CARD
   MEASURED  316.34 wide | radius 12 | border 0.666667 | shadow-lg | my-5
             overflow hidden (the clip-path strip depends on it)

   HEIGHT IS FIXED AT 389.33, matching ResolvePrep exactly. Measured on their
   live page 2026-08-19: all EIGHT visible cards are 389.33px while their text
   content runs 132, 167 and 169 characters — the height does not follow the
   content at all. Their mechanism is `h-full` on the card with a `flex-1` body,
   so the body absorbs the slack and the button is pushed to the bottom.

   An earlier build here let the height follow content instead, because cutting
   the difficulty block left ~90px spare, and the card came out visibly shrunk
   next to the approved mockup. The slack is now DISTRIBUTED the way theirs is:
   .card-desc takes flex:1 and centres itself, so the space opens evenly above
   and below the description rather than collecting into one hole above the
   button.

   The border colour is the other deliberate change: ResolvePrep's #E2E8F0 is
   outside the standard's palette and #E4E7EC is the sanctioned neutral one step
   away. At 0.67px the difference is not visible.
   -------------------------------------------------------------------------- */
.sat-tg .card{
  position:relative;   /* the badge anchors to the CARD, not to the strip */
  height:389.33px;
  margin:20px 0;
  background:var(--white);
  border:0.666667px solid var(--line);
  border-radius:12px;
  box-shadow:0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
  overflow:hidden;
  display:flex;flex-direction:column;
}
/* MEASURED  height 80 | padding-left 28 (ps-7)
   clip-path polygon(0 0, 100% 0, 100% 100%, 60% 100%, 0 60%) -> 9.61deg.
   The polygon is in percentages, so the corner always lands at 60%/60% and the
   angle follows the width. Reproducing the ANGLE instead would be right at one
   card width and wrong at every other. */
.sat-tg .card-strip{
  position:relative;
  height:80px;flex:0 0 80px;
  background:var(--purple);color:var(--white);
  padding-left:28px;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 60% 100%, 0 60%);
}
.sat-tg .card-duration{
  position:absolute;right:24px;top:22.66px;
  font-size:16px;line-height:24px;font-weight:400;color:var(--white);
}
.sat-tg .card-tag{
  position:absolute;right:0;top:46px;
  background:var(--purple-up);color:var(--white);
  font-size:13px;font-weight:700;line-height:20px;padding:4px 18px 4px 22px;
}
/* MEASURED  66 x 66 including a 2px ring | padding 8 | offset 16.67 / 16.67.
   It sits OUTSIDE .card-strip in the DOM on purpose: the strip carries the
   clip-path, and a clip-path clips its children, so a badge inside it would be
   sliced along the same diagonal. */
.sat-tg .card-badge{
  position:absolute;z-index:2;left:16px;top:16px;
  width:66px;height:66px;
  border:2px solid var(--purple-up);border-radius:9999px;
  background:#190342;
  display:flex;align-items:center;justify-content:center;
  color:var(--white);font-size:24px;font-weight:700;letter-spacing:-.02em;
}
.sat-tg .card-body{padding:16px 16px 0;flex:1;display:flex;flex-direction:column;text-align:center;}
/* MEASURED  24/600 | line-height 32 | tracking -0.6 | padding 4 top, 24 bottom */
.sat-tg .card-title{
  margin:0;padding:4px 0 24px;
  font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.6px;
  color:var(--purple);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* MEASURED  14/400 | line-height 20 */
/* flex:1 is what absorbs the slack — the description sits optically centred in
   the space between the title and the button instead of hugging the title and
   leaving a hole underneath. Same job ResolvePrep's flex-1 body does. */
.sat-tg .card-desc{
  margin:0;flex:1;display:flex;align-items:center;justify-content:center;
  font-size:14px;line-height:20px;font-weight:400;color:var(--body);
}
/* MEASURED  height 36 | padding 8 16 | radius 6 | 14/500 | full content width */
.sat-tg .card-cta-row{margin-top:auto;padding:16px 0;}
.sat-tg .card-cta{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:36px;padding:8px 16px;border-radius:6px;border:0;
  background:var(--purple-up);color:var(--white);
  font-size:14px;font-weight:500;line-height:20px;text-decoration:none;
}
.sat-tg a.card-cta:hover{background:var(--purple);color:var(--white);}
/* An empty test is visibly not startable rather than a link to nowhere. §10.21 */
.sat-tg .card-cta[aria-disabled="true"]{
  background:var(--wash);color:#8A8C91;border:1px solid var(--line);cursor:default;
}
/* an empty test must fill the same fixed height, or the grid row jumps */
.sat-tg .card-empty{
  margin:0;flex:1;display:flex;align-items:center;justify-content:center;
  font-size:13px;line-height:18px;color:#8A8C91;
}
.sat-tg .tests-none{
  max-width:696.68px;margin:0 auto;padding:0 16px;text-align:center;
  font-size:15px;color:var(--body);
}
.sat-tg .trademark-footer{
  max-width:696.68px;margin:56px auto 0;padding:0 16px;
  text-align:center;font-size:12px;line-height:18px;color:#8A8C91;
}

@media (max-width:760px){
  .sat-tg .grid{grid-template-columns:1fr;max-width:420px;}
  .sat-tg .sh-row{flex-direction:column;align-items:center;}
  .sat-tg .sh-copy,.sat-tg .sh-art{width:100%;max-width:450px;}
  .sat-tg .sh-h1{font-size:32px;line-height:38px;}
}

/* ---- the hero laptop on phones, 2026-09-07 (HANDOFF §10.129) --------------

   `.lapwrap` above is a fixed 400px slot. MEASURED in headless Chrome at a
   390px viewport: it is centred, so it sits at left -5px / right 395px and
   puts the document 5px over on its own -- 13px at 375px. It is the reason
   /sat/mock-tests still scrolled sideways after the header block in
   sat-home.css was applied, and it is unrelated to the header.

   The artwork is built at 1200px internal and scaled into the slot, so the
   slot can be any size as long as the scale matches it. 300px is exactly 1/4
   of 1200, which keeps the numbers as clean as the 1/3 they already are and
   avoids dividing lengths in CSS. Centred at 300px it clears every viewport
   down to 300px wide, narrower than any device in use.

   430px rather than the 640px the header uses: this is only about the slot no
   longer fitting, and it fits down to 430px. Above that the laptop is
   untouched, at the 400px and 1/3 it has always been. */
@media (max-width: 430px) {
  .sat-tg .lapwrap { width: 300px; height: 187.875px; }
  .sat-tg .lap { transform: scale(0.25); }
}